为什么我可以通过 axios 连接 API？答案

【问题标题】：Why I could connect API via axios?为什么我可以通过 axios 连接 API？
【发布时间】：2021-02-12 09:43:59
【问题描述】：

我使用 Typescript 创建了 React 应用程序，并通过 axios 发出了请求。

这是我的原始代码。

// /src/axios.js

import axios from 'axios';

const instance = axios.create({
    baseURL:"https://api.baseurl.org",
});

export default instance;

// /src/component.js

import React from "react";
import axios from "./axios";

...

const Component = ({ fetchUrl }) => {
    async function fetchData() {
        const request = await axios.get(fetchUrl);
    }
    ...
};

...

我可以正确得到响应，但不知道为什么我可以提出请求。

在 axios.js 文件中，我导出 instance，而不是 axios。在component.js 文件中，我导入axios。

我觉得应该在component.js中导入instance，也就是像这样修改文件：

// /src/component.js modified

import React from "react";
import instance from "./axios";

...

const Component = ({ fetchUrl }) => {
    async function fetchData() {
        const request = await instance.get(fetchUrl);
    }
    ...
};

...

我可以正确地得到相同的结果。两种使用 axios 实例的方法都得到了正确的结果。

为什么我可以将 API 与原始代码连接起来？

【问题讨论】：

标签： javascript reactjs typescript axios

【解决方案1】：

在 axios.js 文件中，我导出的是实例，而不是 axios。在component.js文件中，我导入axios。

您使用的是默认导出，而不是命名导出。您为其分配的名称完全取决于执行导入的模块。

考虑：

const foo = 123;
export default foo;
export const bar = 456;

要导入你说的：

import whatever_you_want_to_call_it, { bar as anything_you_like } from './export.mjs';

bar 是一个命名导出，因此您必须指定它是您要导入的bar（但给它一个不同的名称是可选的）。必须为默认导出指定一个名称，但名称完全取决于您。

【讨论】：