如何克隆 axios 实例答案

【问题标题】：How to clone an axios instance如何克隆 axios 实例
【发布时间】：2023-01-09 21:08:33
【问题描述】：

我有一个在我的应用程序中使用的全局 axios 实例。我想针对特定请求在本地更新标头。但是标题更新正在更新全局默认值。我想了解执行此操作的最佳方法。目前我正在设法重置标题。还玩弄了深度克隆全局 axios 实例的想法。它只是感觉像是一个重要的功能，但找不到任何文档，除了一个关于子实例的 github 问题。 (https://github.com/axios/axios/issues/1170)

编辑：抱歉没有提供代码。这是我给出一个想法的设置：以下是我的全局 axiosClient（在文件 apiClient.js 中），添加了一些拦截器（代码中未显示）。

const axiosClient = axios.create({
baseURL,
headers: {
Authorization: <bearer_token>,
'Content-Type': 'application/json',
.
 }
});

在我的模块中，我导入相同的客户端来发出 api 请求：

import axiosClient from '../apiClient';

export function someRequest({ file }) {
  let formData = new FormData();
  formData.append('file', file);
  const initHeader = axiosClient.defaults.headers['Content-Type'];
  axiosClient.defaults.headers['Content-Type'] = 'multipart/form-data'; // I want to make this change only for the local instance
  const request = axiosClient.post('parse-rebalance-data', formData);
  axiosClient.defaults.headers['Content-Type'] = initHeader; //I have to reset the changes I made to the axiosClient
  return request;
}

现在我的问题又是，(1) 我是否需要以这种 hacky 的方式来做，或者 (2) 我应该研究深度克隆本地副本，或者 (3) 是否有记录的方法来做这件事，我错过了.

【问题讨论】：

请提供足够的代码，以便其他人可以更好地理解或重现问题。
你试过什么，什么不起作用？代码会有所帮助。如果您正确地将标头传递给单个请求，它不应该更新全局标头，但在您提供一些代码之前很难判断。
@PureFunction 已更新

标签： javascript reactjs axios

【解决方案1】：

所有 Axios 实例所做的，都是设置好的默认值用于配置。但是，您可以使用 config 参数将任何其他配置传递给每个调用，就像使用全局 Axios 一样：

import axiosClient from '../apiClient';

export function someRequest({ file }) {
  let formData = new FormData();
  formData.append('file', file);
  return axiosClient.post('parse-rebalance-data', formData, {headers: {'Content-Type': 'multipart/form-data'}});
}

config 参数中指定的标头与默认值中的标头合并。

【讨论】：

【解决方案2】：

你可以这样做：

const instance = axios.create({
  baseURL: 'https://some-domain.com/api/',
  timeout: 1000,
  headers: {'X-Custom-Header': 'foobar'}
});

您可以在这里阅读更多内容：

https://axios-http.com/docs/instance

【讨论】：

这不是我问的。我不想创建本地实例。由于全局实例上有拦截器，我不想在每个本地实例上一次又一次地复制它。

【解决方案3】：

您实际上可以从另一个实例创建一个实例。

因此，例如，您可以：

// src/services/http.js

import axios from 'axios';

const http = axios.create({
  headers: {
    Accept: 'application/json'
  },
  withCredentials: true
});

export default http;

然后你需要一个更具体的实例：

// src/services/pouic.js

import http from './services/http';

// Defines common base URL for all services in this module.
const httpPouic = http.create({
  baseURL: 'https://pouic.com/api'
});

export default {
  getPouic: async function () {
    const pouics = await httpPouic({
      method: 'get'
      url: '/pouic-list'
    });

    return pouics.data;
  }
};

【讨论】：