Nuxt.js中Axios onRequest钩子在asyncData请求中未执行的问题

我一眼就看出问题所在了——你在asyncData里用错了Axios实例！

问题根源 #

你在Nuxt插件里给Nuxt官方Axios插件提供的$axios实例绑定了onRequest拦截器，但在页面组件的asyncData里，你却手动import axios from "axios"，创建了一个完全独立的原生Axios实例。这两个实例是完全分开的，原生实例根本不知道你在插件里配置的拦截规则，自然不会触发onRequest函数。

你的插件配置是没问题的：

export default function({ $axios, redirect, app, store }) {
  $axios.onRequest(config => {
    var requestURL = config.url;
    console.log("Making request to " + requestURL);
    const token = store.state.user.account.token;
    if (token) {
      config.headers.common["Authorization"] = `Bearer ${token}`;
      console.log("Added authorization header");
    }
  });
}

但asyncData里的请求用错了实例：

// 这里的axios是原生实例，和$axios没关系
import axios from "axios";
asyncData({ params }) {
  console.log("params: " + params);
  return axios
    .get(`http://localhost:8080/user/id/${params.id}`)
    .then(res => {
      return { userData: res.data };
    })
    .catch(e => {
      error({ statusCode: 404, message: "User not found" });
    });
}

修复方案 #

只需要两步就能解决：

1. 删掉import axios from "axios"这一行，不需要手动引入原生Axios
2. 在asyncData的上下文参数里解构出$axios和error（你之前用的error也需要从上下文拿，不然会报错），然后用$axios发起请求

修改后的asyncData代码：

asyncData({ params, $axios, error }) {
  console.log("params: " + params);
  return $axios
    .get(`http://localhost:8080/user/id/${params.id}`)
    .then(res => {
      return { userData: res.data };
    })
    .catch(e => {
      error({ statusCode: 404, message: "User not found" });
    });
}

额外提示 #

在Nuxt项目里，所有需要全局配置（比如拦截器、baseURL、超时时间）的请求，都应该使用Nuxt注入的$axios实例：

• 在asyncData、fetch里，从上下文参数中获取$axios
• 在组件的methods、created等钩子中，用this.$axios调用
• 如果需要创建自定义实例，也可以通过Nuxt的Axios插件配置来生成，保证所有请求都遵循统一的规则

内容的提问来源于stack exchange，提问作者Meena Chaudhary