ajax-plus的使用案例

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

ajax-plus

基于axios 的 Vue 插件

如何使用

npm 模塊引入

首先通過 npm 安裝

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

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

對標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參數，直接寫callback(鑒于有些請求不需要傳參數)
this.$ajaxPlus(method, url, res =>{
    //success call back code
})

//$ajaxPlus已經在源碼中處理catch容錯了，假若想在代碼里處理報錯，再加一個參數，如下

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

以上catchCb和finallyCb幾乎很少會用

ajax-plus中給vue全局mixin了一個loading變量,會在ajax請求結束后自動置為false，這個變量，你可以做一些ui層，比如按鈕的防止高頻功能

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

如果你還要做其它相關操作 可以寫在finallyCb中.

比如

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

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

$ajax

也可以通過 this.$axios 來使用 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) {
  
}

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

axios和router、vuex結合起來才能更強大，比如攔截器中根據status判斷是否登陸，用戶的鑒權可以和store結合，response的相關報錯和相關ui的Diag、Message結合會更棒.

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