快捷導(dǎo)航

Nuxt封裝@nuxtjs/axios請(qǐng)求后端數(shù)據(jù)方式

更新時(shí)間：2023年10月13日 08:36:52 作者：明知山_

這篇文章主要介紹了Nuxt封裝@nuxtjs/axios請(qǐng)求后端數(shù)據(jù)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

Nuxt封裝@nuxtjs/axios請(qǐng)求后端數(shù)據(jù)

npm install @nuxtjs/axios -s

在plugins新建axios文件配置公共請(qǐng)求

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注入一個(gè)內(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 方法會(huì)在組件每次加載之前被調(diào)用
asyncData 可以在服務(wù)端或路由更新之前被調(diào)用
asyncData 返回的數(shù)據(jù)融合到組件的data方法
asyncData 方式是在組件初始化前被調(diào)用，方法內(nèi)飾無法通過this來引用組件的實(shí)例對(duì)象

查看源代碼可以查看請(qǐng)求到的數(shù)據(jù)

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue 添加和編輯用同一個(gè)表單,el-form表單提交后清空表單數(shù)據(jù)操作
這篇文章主要介紹了vue 添加和編輯用同一個(gè)表單,el-form表單提交后清空表單數(shù)據(jù)操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2020-08-08
vue中使用axios的作用
Axios是一個(gè)功能強(qiáng)大、易用性高的HTTP庫,適用于大多數(shù)的前端項(xiàng)目,它提供了豐富的功能和靈活的配置選項(xiàng),可以滿足不同項(xiàng)目的需求,這篇文章主要介紹了vue中使用axios的作用,需要的朋友可以參考下
2023-08-08
vue生命周期與鉤子函數(shù)簡單示例
這篇文章主要介紹了vue生命周期與鉤子函數(shù),結(jié)合簡單實(shí)例形式分析了vue.js生命周期及鉤子函數(shù)相關(guān)流程與實(shí)現(xiàn)技巧,需要的朋友可以參考下
2019-03-03
Vue傳參一籮筐(頁面、組件)
這篇文章主要介紹了Vue傳參一籮筐(頁面、組件)，Vue頁面、組件之間傳參方式繁多，此處羅列出常用的幾種方式，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2019-04-04
VUE學(xué)習(xí)之Element-ui文件上傳實(shí)例詳解
今天進(jìn)行了element?文件上傳組件的運(yùn)用,寫一下心得,下面這篇文章主要給大家介紹了關(guān)于VUE學(xué)習(xí)之Element-ui文件上傳的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-10-10
vue的代理配置pathRewrite重寫不生效問題及解決
這篇文章主要介紹了vue的代理配置pathRewrite重寫不生效問題及解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-04-04
Vue+Element UI實(shí)現(xiàn)下拉菜單的封裝
這篇文章主要為大家詳細(xì)介紹了Vue+Element UI實(shí)現(xiàn)下拉菜單的封裝代碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-09-09
Vue登錄功能實(shí)現(xiàn)
本文主要介紹了 Vue 登錄功能實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-09-09
詳解VUE響應(yīng)式原理
這篇文章主要為大家介紹了vue組件通信的幾種方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助
2021-11-11
vue中路由重定向redirect問題
這篇文章主要介紹了vue中路由重定向redirect問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-05-05