Heim >Web-Frontend >js-Tutorial >Einführung in die Verwendung von Ajax-Plus (Code)
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; } }) }$ajax Verwenden Sie auch this.$axios, um alle API-Methoden von Axios wie folgt zu verwenden:
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) { }Aufgrund inkonsistenter Front-End- und Back-End-Konventionen ist die tiefere Verarbeitung von Rückrufen nicht perfekt. Axios kann in Kombination mit Router und Vuex leistungsfähiger sein. Beispielsweise kann die Benutzerauthentifizierung anhand der Kombination von antwortbezogenen Fehlern und damit verbundenen Fehlern ermittelt werden UI Diag und Message werden leistungsfähiger sein.
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!