vue.js - Nuxtjs Axios onRequest() 未针对 asnycData 请求执行
问题描述
我已经配置了 axios 插件onRequest
助手来设置Authorization
API 请求的标头,如下所示
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. });
这个onRequest
助手actions
在 in 中被调用store
。但是对于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
辅助函数。我在这里错过了什么吗?如何解决这个问题?
解决方案
当您import axios from 'axios'
不使用最初指定的 axios 实例的配置时。相反,您使用的是全新的 axios 实例。
正确的方法是$axios
利用Nuxt context
.
asyncData(context) {
await context.$axios...
}
推荐阅读
- reactjs - 带有作为参数传递的属性的 Wordpress Gutenberg SetAttributes
- python-3.x - 我在代码的最后一行收到一条错误消息
- mailchimp - SPF 失败我不理解 mailchimp
- c# - 当我将测试发送到另一个应用程序时,我无法输入进入应用程序
- user-interface - 编写确认(是/否)对话框
- xamarin - 页面关闭时 Xamarin 形成 Xfx.Controls 异常
- android - 出现软键盘时如何隐藏底部导航菜单?
- java - 如何为枚举对象编写自定义提供程序?
- reactjs - React + Laravel - 显示 HTML 的 Response.data
- swift - 什么可能导致 SwiftUI 和 NavigationView 出现此动画错误?