多个实例或子包中的axios默认标头答案

【问题标题】：Axios default headers in multiples instances or in sub Packages多个实例或子包中的axios默认标头
【发布时间】：2023-03-10 17:52:02
【问题描述】：

如何在也使用 Axios 的依赖项中设置 Axios 中的全局默认标头？

我正在制作一个依赖于 Axios 的“反应组件”（在 npm 中公开），但是当该组件进行 Ajax 调用时，我需要该组件来保留我（父）项目的 Axios 配置标头。

*看起来我的“react-component”创建了一个新的 Axios 实例，而不是使用我（父）项目的 Axios 实例。

axios.defaults.headers['authKey']='xxxxxx'

*我已经在我的（父）项目中使用了 Axios 拦截器，但是为我的“react 组件”制作的 Ajax 从未被触发。

【问题讨论】：

你可以通过调用create()方法创建多个axios实例，但是对于每个实例你必须分别设置拦截器。这能回答你的问题吗？
我想要的是在一个地方为我的所有实例设置默认标头，用于创建和创建实例
如何用你的 header 创建一个对象，然后将该对象附加到所有 axios 实例？ const axiosSetup = {headers: {'authKey': 'xxx'}}; const instance1 = axios.create(axiosSetup), instance2 = axios.create(axiosSetup);
我希望没有不同的 axios 实例，而是在子组件中使用我的（父）项目的实例，所以当我使用拦截器或 axios 的配置时（父）项目它也在孩子的项目中改变。

标签： javascript reactjs npm axios

【解决方案1】：

我认为您可以通过使用道具将您的标头传递给您的子组件，并使用该道具在该组件中调用 Ajax 请求，或者您可以为此创建一个 json 文件（可能是常量文件）并在您的子组件中要求它们和期望其他开发人员创建他们的配置。而且我很确定您误解了 import 语句背后的逻辑。当您在 ES6 中导入一个类时，会创建该类的新实例 MDN Reference: import .您应该搜索的是单例，这是一个与您的问题类似的示例singleton object in react native。

【讨论】：

问题是我们要打包那个“组件”并在npm中发布，该组件实现了axios，所以我们想在导入“组件”的项目中设置标题配置。那么，为了获得这种行为，封装该“组件”的方法是什么