关于 axios 刷新后第一次传后台没有 token

Question

全局配置的 axios，请求拦截处获取 token 并传到后台。刷新页面后第一次请求可以获取到 token，但是没传。不知道为什么，第二次请求就可以了。复现只出现在刷新后请求第一次不传 token。代码如下：

// http请求拦截器
axios.interceptors.request.use(config => {
    let token = window.localStorage.getItem('token');
    !!token ? axios.defaults.headers.common['token'] = token : '';
    alert(axios.defaults.headers.common['token'])
    removePending(config); //在一个axios发送前执行一下取消操作
    config.cancelToken = new cancelToken((c)=>{
        // 这里的axios标识我是用请求地址&请求方式拼接的字符串
        pending.push({ u: config.url + JSON.stringify(config.data) +'&' + config.method, f: c });  
    });
    return Promise.resolve(config)
}, error => {
    return Promise.reject(error)
})

刷新页面，点击按钮执行 axios 请求时候 可以弹出 token（弹窗：上面第五行），但是查看 network中 token 没有传过去

Answer 1

如果我理解的没错的化，你只是要每个 axios 请求都携带 token，没太理解你的代码为什么写的这么复杂，给你一段我写过的代码：

axios.interceptors.request.use(
    config => {
        let token = localStorage.getItem('token')
        if (token && token != '') {
            config.headers.token = token;
        }
        return config;
    },
    error => {
        return Promise.reject(error);
    });

这句

axios.defaults.headers.common['token'] = token

通常是在拦截器外面用的，既然都在拦截器里面了，直接修改 config 就好了。

而且直接返回 config 就好了，起码官方的代码是这么写的。

Answer 2

你应该想清楚该怎么做，而不是随便想个做法，然后一定要把它实现。

对于你这样的需求，最合适的做法是程序初始化时，从 localStorage 里取出 token，然后用 axios.defaults.headers.common['token'] = token 把值赋进去。类似的地方还有登录成功。

Answer 3

你应该直接return config，而不是return Promise