ホームページ > 記事 > ウェブフロントエンド > 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 サイトの他の関連記事を参照してください。