Nuxt封装@nuxtjs/axios请求后端数据方式
更新时间：2023年10月13日 08:36:52 作者：明知山_
这篇文章主要介绍了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来引用组件的实例对象
查看源代码可以查看请求到的数据
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了前端框架vue，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
Vue-cli proxyTable 解决开发环境的跨域问题详解
本篇文章主要介绍了Vue-cli proxyTable 解决开发环境的跨域问题详解，非常具有实用价值，需要的朋友可以参考下2017-05-05
vue.js2.0 实现better-scroll的滚动效果实例详解
better-scroll 是一个移动端滚动的解决方案，它是基于 iscroll 的重写。better-scroll 也很强大，不仅可以做普通的滚动列表，还可以做轮播图、picker 等等，下面通过本文给大家介绍vue.js2.0 实现better-scroll的滚动效果，感兴趣的朋友一起看看吧2018-08-08
这篇文章主要为大家详细介绍了Vue生命周期和数据共享，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2022-02-02
vue项目中,前端使用axios与后台进行数据请求或者提交的时候,如果后台没有设置跨域,浏览器做数据请求的时候就会报错,这篇文章主要给大家介绍了关于vue如何解决axios请求前端跨域问题的相关资料,需要的朋友可以参考下2021-10-10
这篇文章主要给大家介绍了关于Vue精美简洁登录页完整代码的相关资料,通过文中的方法大家可以使用实现简单的用户登录界面,下面通过示例代码介绍的非常详细,需要的朋友可以参考下2023-07-07
这篇文章主要介绍了uniapp开发打包多端应用完整流程指南,包括了uniapp打包小程序，uniapp打包安卓apk，uniapp打包IOS应用,需要的朋友可以参考下2022-12-12
这篇文章主要介绍了浅谈vue首次渲染全过程，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-04-04
这篇文章主要介绍了详解vue页面首次加载缓慢原因及解决方案，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-11-11
这篇文章主要介绍了Vue 原生实现右键菜单组件功能，本文给大家扩展知识点vue点击菜单以外区域，隐藏菜单操作，通过实例代码给大家介绍的非常详细,需要的朋友可以参考下2019-12-12
最新评论