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

schreiben, zum Beispiel

<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!