Introduction à l'utilisation d'ajax-plus (code)

Le contenu de cet article concerne l'utilisation d'ajax-plus (code). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

ajax-plus

Plug-in Vue basé sur axios

Comment utiliser

npm introduction du module

Installez d'abord

npm install --save ajax-plus
or
yarn add ajax-plus -S

via npm puis introduisez-le et configurez-le dans le fichier d'entrée :

Pour la configuration d'axios, voir axios

import Vue from 'Vue'
// 引入
import ajaxPlus from 'ajax-plus'
// 配置
Vue.use(ajaxPlus, {
    //这里写一些ajax的option,详见axios文档,比如
    baseURL: "https://jsonplaceholder.typicode.com",
    timeout: 150000
})

Exemple

Méthode $ajaxPlus

La méthode $ajaxPlus est ajoutée au composant Vue et est utilisée comme suit :

// 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}
})

Le catchCb et enfinCb sont rarement utilisés

Ajax-plus a une variable de chargement pour le mixin vue global, qui sera automatiquement définie sur false une fois la requête ajax terminée. Avec cette variable, vous pouvez créer des couches d'interface utilisateur, telles que. la fonction de prévention haute fréquence du bouton

Vue.mixin({
    data () {
      return {
        loading: false
      }
    }
  })

Si vous souhaitez effectuer d'autres opérations connexes, vous pouvez les écrire dans finallyCb

Par exemple,

<.>

<el-button :loading="loading1" @click="handleSubmit">按钮1</el-button>

$ajax

handleSubmit(){
    this.$ajaxPlus('post','/submit',{foo:1, bar:2}, res=>{
        alert('提交成功了')
    },{
        catchCb:()=>{
            alert('提交失败了')
        },    
        finallyCb:()=>{
            //按钮置为可点击状态
            this.loading1 = false;
        }
    })
}

peut également être transmis via ce .$axios pour utiliser toutes les méthodes API d'axios, comme suit :

En raison d'un front-end et d'un retour incohérents -fin des conventions, le traitement plus approfondi du rappel n'est pas parfait.

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) {
  
}

Axios peut être plus puissant lorsqu'il est combiné avec le routeur et vuex. Par exemple, l'intercepteur détermine s'il faut se connecter en fonction du statut. L'authentification de l'utilisateur peut être combinée avec le magasin. Le diagnostic et le message de l'interface utilisateur associé seront plus puissants.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!