设置 axios header

Question

我有一个 class 如下所示：

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 文档，我发现我可以通过执行以下操作为每个请求设置 header：

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

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

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

Answer 1

您可以在每次调用 axios 时设置 headers（即使调用时间更长：

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...
}

不是最短的，但我认为它可以胜任。

希望对您有所帮助。

马克西姆

Answer 2

既然你在使用 OOP，我会建议使用构造函数和一些依赖注入来让你的生活更轻松。

使用这样的构造函数：

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

如果你在其他一些共享相同的地方使用 axios headers 我建议使用应用程序初始化 axios，一些 "main" 类型的文件，设置默认值而不是传递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}) }

我强烈建议避免依赖 class 上的 sessionStorage，因为您不知道它何时加载或执行。最好明确说明它的来源。也将更容易测试。

Answer 3

试试这个：

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

Answer 4

为此，您可以在 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

设置 axios header

Set axios header

javascript

ecmascript-6

axios