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)文章

小白教程|一小時(shí)上手最流行的前端框架vue（推薦）
這篇文章主要介紹了前端框架vue，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-04-04
Vue-cli proxyTable 解決開發(fā)環(huán)境的跨域問題詳解
本篇文章主要介紹了Vue-cli proxyTable 解決開發(fā)環(huán)境的跨域問題詳解，非常具有實(shí)用價(jià)值，需要的朋友可以參考下
2017-05-05
vue.js2.0 實(shí)現(xiàn)better-scroll的滾動(dòng)效果實(shí)例詳解
better-scroll 是一個(gè)移動(dòng)端滾動(dòng)的解決方案，它是基于 iscroll 的重寫。better-scroll 也很強(qiáng)大，不僅可以做普通的滾動(dòng)列表，還可以做輪播圖、picker 等等，下面通過本文給大家介紹vue.js2.0 實(shí)現(xiàn)better-scroll的滾動(dòng)效果，感興趣的朋友一起看看吧
2018-08-08
Vue?生命周期和數(shù)據(jù)共享詳解
這篇文章主要為大家詳細(xì)介紹了Vue生命周期和數(shù)據(jù)共享，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助
2022-02-02
vue如何解決axios請(qǐng)求前端跨域問題
vue項(xiàng)目中,前端使用axios與后臺(tái)進(jìn)行數(shù)據(jù)請(qǐng)求或者提交的時(shí)候,如果后臺(tái)沒有設(shè)置跨域,瀏覽器做數(shù)據(jù)請(qǐng)求的時(shí)候就會(huì)報(bào)錯(cuò),這篇文章主要給大家介紹了關(guān)于vue如何解決axios請(qǐng)求前端跨域問題的相關(guān)資料,需要的朋友可以參考下
2021-10-10
Vue精美簡(jiǎn)潔登錄頁完整代碼實(shí)例
這篇文章主要給大家介紹了關(guān)于Vue精美簡(jiǎn)潔登錄頁完整代碼的相關(guān)資料,通過文中的方法大家可以使用實(shí)現(xiàn)簡(jiǎn)單的用戶登錄界面,下面通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-07-07
uniapp開發(fā)打包多端應(yīng)用完整方法指南
這篇文章主要介紹了uniapp開發(fā)打包多端應(yīng)用完整流程指南,包括了uniapp打包小程序，uniapp打包安卓apk，uniapp打包IOS應(yīng)用,需要的朋友可以參考下
2022-12-12
淺談vue首次渲染全過程
這篇文章主要介紹了淺談vue首次渲染全過程，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2021-04-04
詳解vue頁面首次加載緩慢原因及解決方案
這篇文章主要介紹了詳解vue頁面首次加載緩慢原因及解決方案，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-11-11
原生Vue 實(shí)現(xiàn)右鍵菜單組件功能
這篇文章主要介紹了Vue 原生實(shí)現(xiàn)右鍵菜單組件功能，本文給大家擴(kuò)展知識(shí)點(diǎn)vue點(diǎn)擊菜單以外區(qū)域，隱藏菜單操作，通過實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下
2019-12-12