时间戳

首页 > 解决方案 > 如何将动态参数传递给axios实例

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

问题描述

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

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

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

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

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

标签： javascriptreactjsaxiosfetch

解决方案

要动态传递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(...);

推荐阅读