Der Inhalt dieses Artikels befasst sich mit der Verwendung von Ajax-Plus (Code). Ich hoffe, dass er für Freunde hilfreich ist.
ajax-plus
Vue-Plug-in basierend auf Axios
Verwendung
npm Moduleinführung
Installieren Sie zuerst
npm install --save ajax-plus or yarn add ajax-plus -S
über npm, führen Sie es dann ein und konfigurieren Sie es in der Eintragsdatei:
Konfiguration für Axios, siehe Beispiel für Axios
import Vue from 'Vue'
// 引入
import ajaxPlus from 'ajax-plus'
// 配置
Vue.use(ajaxPlus, {
//这里写一些ajax的option,详见axios文档,比如
baseURL: "https://jsonplaceholder.typicode.com",
timeout: 150000
})
$ajaxPlus-Methode
Die $ajaxPlus-Methode wird der Vue-Komponente hinzugefügt und wie folgt verwendet:
// 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}
})Die oben genannten „catchCb“ und „finalCb“ werden selten verwendet
ajax-plus Dem globalen Vue-Mixin wird eine Ladevariable übergeben, die nach Abschluss der Ajax-Anfrage automatisch auf false gesetzt wird. Mit dieser Variablen können Sie einige UI-Ebenen erstellen, z. B. die Hochfrequenz-Präventionsfunktion der Schaltfläche
Vue.mixin({
data () {
return {
loading: false
}
}
}) Wenn Sie es trotzdem tun möchten, können Sie andere verwandte Operationen in 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;
}
})
}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) {
}Das obige ist der detaillierte Inhalt vonEinführung in die Verwendung von Ajax-Plus (Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
