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

Question

我刚刚阅读了一篇 css-tricks 文章，介绍如何使用 axios HERE让 API 请求 DRY 。现在像这样的反应会很好地工作：

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(...);