ajax-plusの使い方の紹介（コード）

この記事は、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
})

Example## を参照してください。

#$ajaxPlus メソッド

$ajaxPlus メソッドは Vue コンポーネントに追加され、次のように使用されます。

// 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 グローバル ミックスインにロード変数が与えられ、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

これを通じて axios のすべての API を使用することもできます。$axios メソッドは次のとおりです:

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 は、ルーターや vuex と組み合わせるとさらに強力になります。たとえば、インターセプターは、応答関連のエラー報告と関連するものを組み合わせて、ステータスに基づいてログインするかどうかを決定できます。 UI 診断とメッセージがさらに強力になります。

以上がajax-plusの使い方の紹介（コード）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。