javascript - 如何将动态参数传递给axios实例

Question

我刚刚阅读了一篇关于如何使用 axios HERE 使您的 API 请求 DRY 的 css-tricks 文章.现在做出这样的 react 会很好:

export default axios.create({
  baseURL: 'https://mysite/v3',
  headers: {
    'content-type': 'application/json'
  }
})

问题是如果我想向这个实例传递额外的参数怎么办？ IE。我有另一个参数，我想像这样的标题:

'X-USER-ACCESS-TOKEN': sessionToken,

另外，如果我有多个其他选项可以传递给标题怎么办？

Answer 1

通过headers动态地，您可以导出一个采用 options 的函数作为参数并返回 axios 的新实例:

// utils/custom-axios.js

export default function(options = {}) {
  const { 
    headers = {} 
  } = options;
  
  return axios.create({
    baseURL: "https://mysite/v3",
    headers: {
      "Content-Type": "application/json",
      ...headers
    }
  });
}

然后你可以通过以下方式使用它:

const axios = require("./utils/custom-axios");

const options = { 
  headers: { "X-USER-ACCESS-TOKEN": "secret" } 
};

axios(options)
  .post("./user.json", formData)
  .then(...)
  .catch(...);

// alternatively, don't pass any options 
axios()
  .post("./user.json", formData)
  .then(...)
  .catch(...);