Nuxt封裝@nuxtjs/axios請求后端數(shù)據(jù)方式
更新時間：2023年10月13日 08:36:52 作者：明知山_
這篇文章主要介紹了Nuxt封裝@nuxtjs/axios請求后端數(shù)據(jù)方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
Nuxt封裝@nuxtjs/axios請求后端數(shù)據(jù)
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注入一個內(nèi)置的方法
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打印上下文，可以發(fā)現(xiàn)我們方法注入進(jìn)去了
asyncData(ctx){
ctx.$axiosApi(...)
}
// 在methids里面寫
this.$axiosApi(...)asyncData方法
- asyncData 方法會在組件每次加載之前被調(diào)用
- asyncData 可以在服務(wù)端或路由更新之前被調(diào)用
- asyncData 返回的數(shù)據(jù)融合到組件的data方法
- asyncData 方式是在組件初始化前被調(diào)用，方法內(nèi)飾無法通過
this來引用組件的實例對象
查看源代碼可以查看請求到的數(shù)據(jù)
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了前端框架vue，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
Vue-cli proxyTable 解決開發(fā)環(huán)境的跨域問題詳解
本篇文章主要介紹了Vue-cli proxyTable 解決開發(fā)環(huán)境的跨域問題詳解，非常具有實用價值，需要的朋友可以參考下2017-05-05
vue.js2.0 實現(xiàn)better-scroll的滾動效果實例詳解
better-scroll 是一個移動端滾動的解決方案，它是基于 iscroll 的重寫。better-scroll 也很強(qiáng)大，不僅可以做普通的滾動列表，還可以做輪播圖、picker 等等，下面通過本文給大家介紹vue.js2.0 實現(xiàn)better-scroll的滾動效果，感興趣的朋友一起看看吧2018-08-08
這篇文章主要為大家詳細(xì)介紹了Vue生命周期和數(shù)據(jù)共享，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-02-02
vue項目中,前端使用axios與后臺進(jìn)行數(shù)據(jù)請求或者提交的時候,如果后臺沒有設(shè)置跨域,瀏覽器做數(shù)據(jù)請求的時候就會報錯,這篇文章主要給大家介紹了關(guān)于vue如何解決axios請求前端跨域問題的相關(guān)資料,需要的朋友可以參考下2021-10-10
這篇文章主要給大家介紹了關(guān)于Vue精美簡潔登錄頁完整代碼的相關(guān)資料,通過文中的方法大家可以使用實現(xiàn)簡單的用戶登錄界面,下面通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-07-07
uniapp開發(fā)打包多端應(yīng)用完整方法指南
這篇文章主要介紹了uniapp開發(fā)打包多端應(yīng)用完整流程指南,包括了uniapp打包小程序，uniapp打包安卓apk，uniapp打包IOS應(yīng)用,需要的朋友可以參考下2022-12-12
這篇文章主要介紹了淺談vue首次渲染全過程，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
這篇文章主要介紹了詳解vue頁面首次加載緩慢原因及解決方案，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
這篇文章主要介紹了Vue 原生實現(xiàn)右鍵菜單組件功能，本文給大家擴(kuò)展知識點vue點擊菜單以外區(qū)域，隱藏菜單操作，通過實例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2019-12-12