Nuxtjs Axios onRequest() 未针对 asnycData 请求执行

Posted 2023-02-22

【中文标题】Nuxtjs Axios onRequest() 未针对 asnycData 请求执行

【英文标题】：Nuxtjs Axios onRequest() not executed for asnycData request

【发布时间】：2020-05-05 12:12:20

【问题描述】：

我已经配置了 axios 插件 onRequest helper 以在 API 请求上设置 Authorization 标头，如下所示

1. export default function( $axios, redirect, app, store ) 
2. $axios.onRequest(config => 
3.   var requestURL = config.url;
4.   console.log("Making request to " + requestURL);
5.    const token = store.state.user.account.token;
6.    if (token) 
7.      config.headers.common["Authorization"] = `Bearer $token`;
8.      console.log("Added authorization header");
9.    
10. );

在store 中为actions 调用此onRequest 助手。但是对于页面组件中的asyncData，调用一直到上面的第2行，但从未进入onRequest函数。

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" );
  );

据我了解，所有 Axios 请求都应通过 onRequest 辅助函数。我在这里错过了什么吗？如何解决这个问题？

【问题讨论】：

我仍在学习如何正确使用 nuxt、axios 和 auth 模块。你把你在这里写的第一个代码块放在哪里？它是作为中间件，还是作为 axios 的扩展添加的插件？

【参考方案1】：

当您import axios from 'axios' 时，您没有使用您最初指定的 axios 实例的配置。相反，您使用的是全新的 axios 实例。

正确的方法是利用Nuxt context 中的$axios 实例。

asyncData(context) 
   await context.$axios...

【参考方案2】：

您也可以直接使用$axios 实例。一个例子是：

asyncData($axios) 
   await $axios...