基於axios的vue插件，讓http請求更簡單
ajax-plus
基於axios 的 Vue 插件
如何使用
npm 模塊引入
首先通過 npm 安裝
```npm install --save ajax-plus
or
yarn add ajax-plus -S
<p>然後在入口文件引入並配置:</p>
<p>對標axios的配置，詳見<a href="https://www.npmjs.com/package/axios" rel="nofollow noreferrer">axios</a>??</p>
import Vue from ‘Vue‘
import ajaxPlus from ‘ajax-plus‘
// 配置
Vue.use(ajaxPlus, {
//這裏寫一些ajax的option,詳見axios文檔,比如
baseURL: "https://jsonplaceholder.typicode.com",
timeout: 150000
})
<h2>示例</h2>
<h3>$ajaxPlus方法</h3>
<p>在 Vue 組件上添加了 <code>$ajaxPlus</code> 方法, 使用如下:</p>
// 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}
})
<p>以上<code>catchCb</code>和<code>finallyCb</code>幾乎很少會用</p>
<p><code>ajax-plus</code>中給<code>vue</code>全局mixin了一個<code>loading</code>變量,會在ajax請求結束後自動置為false，這個變量，你可以做一些ui層，比如按鈕的防止高頻功能</p>
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結合會更棒.
個人筆記
更多使用方式以及改寫, 參考源碼, 歡迎提意見。
原文地址：https://segmentfault.com/a/1190000016802727
基於axios的vue插件，讓http請求更簡單