ajax-plus的使用案例

小編給大家分享一下ajax-plus的使用案例，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！

ajax-plus

基于axios 的 Vue 插件

如何使用

npm 模塊引入

首先通過 npm 安裝

npm install --save ajax-plus
or
yarn add ajax-plus -S

然后在入口文件引入并配置:

對(duì)標(biāo)axios的配置，詳見axios

import Vue from 'Vue'
// 引入
import ajaxPlus from 'ajax-plus'
// 配置
Vue.use(ajaxPlus, {
    //這里寫一些ajax的option,詳見axios文檔,比如
    baseURL: "https://jsonplaceholder.typicode.com",
    timeout: 150000
})

示例

$ajaxPlus方法

在 Vue 組件上添加了 $ajaxPlus 方法, 使用如下:

// method可以為 get、delete、options、post、put、patch、head

// url為去除baseUrl的

// data為object

this.$ajaxPlus(method, url, data, res =>{
    //success call back code
})

//也可以省略data參數(shù)，直接寫callback(鑒于有些請(qǐng)求不需要傳參數(shù))
this.$ajaxPlus(method, url, res =>{
    //success call back code
})

//$ajaxPlus已經(jīng)在源碼中處理catch容錯(cuò)了，假若想在代碼里處理報(bào)錯(cuò)，再加一個(gè)參數(shù)，如下

this.$ajaxPlus(method, url, data, res =>{
    //success call back code
},{
    //catch是ajax請(qǐng)求失敗后 要執(zhí)行的代碼
    //finallyCb是ajax請(qǐng)求結(jié)束后 要執(zhí)行的代碼，無(wú)論成功或者失敗
    catchCb:()=>{//code}    
    finallyCb:()=>{//code}
})

以上catchCb和finallyCb幾乎很少會(huì)用

ajax-plus中給vue全局mixin了一個(gè)loading變量,會(huì)在ajax請(qǐng)求結(jié)束后自動(dòng)置為false，這個(gè)變量，你可以做一些ui層，比如按鈕的防止高頻功能

Vue.mixin({
    data () {
      return {
        loading: false
      }
    }
  })

如果你還要做其它相關(guān)操作 可以寫在finallyCb中.

比如

<el-button :loading="loading1" @click="handleSubmit">按鈕1</el-button>

handleSubmit(){
    this.$ajaxPlus('post','/submit',{foo:1, bar:2}, res=>{
        alert('提交成功了')
    },{
        catchCb:()=>{
            alert('提交失敗了')
        },    
        finallyCb:()=>{
            //按鈕置為可點(diǎn)擊狀態(tài)
            this.loading1 = false;
        }
    })
}

$ajax

也可以通過 this.$axios 來(lái)使用 axios 所有的 api 方法，如下：

this.$ajax.get(url, data).then(res =>{
  //拿到res了
})

this.$ajax.post(url, data).then( res =>{
  //拿到res了
})

try {
  const data = await this.$ajax.post(url, data)
} catch (error) {
  
}

由于前后端約定不一致，關(guān)于callback的更深層的處理并沒有完善。

axios和router、vuex結(jié)合起來(lái)才能更強(qiáng)大，比如攔截器中根據(jù)status判斷是否登陸，用戶的鑒權(quán)可以和store結(jié)合，response的相關(guān)報(bào)錯(cuò)和相關(guān)ui的Diag、Message結(jié)合會(huì)更棒.

看完了這篇文章，相信你對(duì)ajax-plus的使用案例有了一定的了解，想了解更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！