javascript - 为什么我可以通过 axios 连接 API?
问题描述
我用 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 文件中,我 export instance
,而不是axios
. 在 component.js 文件中,我导入axios
.
我想我应该instance
在component.js中导入,也就是像这样修改文件:
// /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 与原始代码连接起来?
解决方案
在 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
你想要导入的(但是给它一个不同的名字是可选的)。默认导出必须指定一个名称,但名称完全取决于您。
推荐阅读
- angular - 处理按钮单击时的角度错误
- reporting-services - 更改 SSRS 中的图例形状
- firebase - firebase rules write for auth user but delete only its own data
- sql-server - Track the changes of a few columns in an existing table leveraging primary keys?
- python - 在 OS X 上运行 mpi
- c# - Fill Json with a list
- find - 当行数总是改变时,VBA 在工作表之间复制/粘贴行?
- jenkins - 指定的来源“MySource”无效
- php - php - 用用户输入的 2 个或更多子字符串替换用户字符串的确切部分 - 怎么办?
- html - 将溢出滚动与图片高度对齐