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

每次调用axios时都可以设置标题（即使调用时间稍长：

＆＃13;

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

＆＃13;

不是最短的，但我认为它可以做到这一点。

我希望它有所帮助。

马克西姆

Answer 2

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

使用像这样的构造函数：

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

如果您在其他共享相同标题的地方使用axios，我建议使用app初始化axios，一些“主”类型的文件，设置默认值而不是传递email和{{ 1}}只需传递axios实例，如：

accessToken

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

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

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

Answer 3

尝试一下：

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

Answer 4

为此，您可以在interceptors中使用axios。您可以先拦截请求或响应，然后再进行处理或捕获。

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标头

4 个答案: