這篇文章帶給大家的內容是關於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的使用方法介紹（程式碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
