Nuxt封装@nuxtjs/axios请求后端数据方式
作者：明知山_
这篇文章主要介绍了Nuxt封装@nuxtjs/axios请求后端数据方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
Nuxt封装@nuxtjs/axios请求后端数据
npm install @nuxtjs/axios -s
在plugins新建axios文件配置公共请求
export default ({ app: { $axios, redirect } }, inject) => {
$axios.defaults.baseURL = 'http://api.com'
$axios.setHeader('Content-Type', 'application/x-www-form-urlencoded')
$axios.defaults.timeout = 10000;
$axios.onRequest(req => { })
$axios.onResponse(res => {
if (res.data.code == 2000) {
return Promise.resolve(res)
} else {
return Promise.reject(res)
}
})
$axios.onError(err => {
return Promise.reject(err)
})
// 向nuxt注入一个内置的方法
inject('axiosApi', (url, params, method) => {
return new Promise((resolve, reject) => {
$axios({
method: method || "POST",
url: url,
data: params
}).then(res => {
resolve(res)
}).catch(err => {
reject(err)
});
})
})
}在asyncData打印上下文，可以发现我们方法注入进去了
asyncData(ctx){
ctx.$axiosApi(...)
}
// 在methids里面写
this.$axiosApi(...)asyncData方法
- asyncData 方法会在组件每次加载之前被调用
- asyncData 可以在服务端或路由更新之前被调用
- asyncData 返回的数据融合到组件的data方法
- asyncData 方式是在组件初始化前被调用，方法内饰无法通过
this来引用组件的实例对象
查看源代码可以查看请求到的数据
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。