Question

我用 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 与原始代码连接起来？

Answer 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 您想要导入（但给它一个不同的名称是可选的）。必须为默认导出指定一个名称，但名称完全由您决定。

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

1 个答案: