设置 axios 标头

Question

我有一个类似如下的课程：

import axios from "axios";

//axios.defaults.headers["Email"] = sessionStorage.getItem('email');
//axios.defaults.headers["Access-Token"] = sessionStorage.getItem('access_token');

class Api {
    // users
    static getUsers(params={}) { return axios.get("users", {params}) }
    static getUser(userId) { return axios.get("users/" + userId) }
    static updateUser(userId, data) { return axios.put("users/" + userId, data) }        

    // other resources...
}

通过阅读 Axios 文档，我发现我可以通过执行以下操作为每个请求设置标头：

axios.defaults.headers["Email"] = sessionStorage.getItem('email');
axios.defaults.headers["Access-Token"] = sessionStorage.getItem('access_token');

如果我在文件开头将这两行插入到类之外，我会收到一个错误，因为尚未设置 sessionStorage。刷新后虽然 sessionStorage 被设置，所以一切正常。

我该如何解决这个问题？我想保持 axios 调用尽可能短。

Answer 1

由于您使用的是 OOP，我建议您使用构造函数和一些依赖注入来让您的生活更轻松。

使用这样的构造函数：

constructor(email, accessToken) {
  axios.defaults.headers["Email"] = email
  // same thing for accessToken
}

如果您在共享相同标题的其他地方使用 axios，我建议使用应用程序初始化 axios，一些“主要”类型的文件，设置默认值，而不是传递 email 和 accessToken像这样传递 axios 实例：

constructor(axios) {
  this.axios = axios // without importing axios
}
// and use like that
this.axios.get("users", {params})

其他建议是将 axios 实例直接传递给您的方法，例如：

static getUsers(axios, params={}) { return axios.get("users", {params}) }

我强烈建议避免在类上依赖 sessionStorage，因为您不知道它何时会加载或执行。最好是明确地告诉它来自哪里。也将更容易测试。

Answer 2

试试这个：

 axios.defaults.headers.common["token"] = action.payload.data.token;

Answer 3

为此，您可以在axios 中使用interceptors。您可以在 then 或 catch 处理请求或响应之前拦截它们。

axios.interceptors.request.use(function (config) {
           // Do something before request is sent
           axios.defaults.headers["Email"] = sessionStorage.getItem('email');
           axios.defaults.headers["Access-Token"] = token;
           return config;
         }, function (error) {
            // Do something with request error
            return Promise.reject(error);
         });

更多详情：https://github.com/axios/axios

Answer 4

您可以在每次调用 axios 时设置标题（即使调用时间长一点：

import axios from "axios";


class Api {
    // users
    static getUsers(params={}) { 
      params.headers = params.headers || {}
      params.headers["Email"] = sessionStorage.getItem('email');
      params.headers["Access-Token"] = sessionStorage.getItem('access_token');
      return axios.get("users", {params}) 
    }
    static getUser(userId, params={}) { 
      params.headers = params.headers || {}
      params.headers["Email"] = sessionStorage.getItem('email');
      params.headers["Access-Token"] = sessionStorage.getItem('access_token');
      return axios.get("users/" + userId, params) 
     }
    static updateUser(userId, data, params={}) { 
      params.headers = params.headers || {}
      params.headers["Email"] = sessionStorage.getItem('email');
      params.headers["Access-Token"] = sessionStorage.getItem('access_token');
      return axios.put("users/" + userId, data, params) 
    }        

    // other resources...
}

不是最短的，但我认为它可以完成这项工作。

希望对你有帮助。

马克西姆