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

示例

$ajaxPlus方法

在 Vue 组件上添加了 $ajaxPlus 方法, 使用如下:

// 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全局mixin了一个loading变量,会在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

也可以通过 this.$axios 来使用 axios 所有的 api 方法,如下:

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

由于前后端约定不一致,关于callback的更深层的处理并没有完善。

axios和router、vuex结合起来才能更强大,比如拦截器中根据status判断是否登陆,用户的鉴权可以和store结合,response的相关报错和相关ui的Diag、Message结合会更棒.

本文由(壳先生)整理自网络,如转载请注明出处:https://www.mrshell.com;
本站发布的内容若侵犯到您的权益,请邮件联系 i@mrshell.com 删除,我们将及时处理!
===========================================================================

1. 本站大部分下载资源收集于网络,不保证其完整性以及安全性,请下载后自行测试。
2. 本站资源仅供学习和交流使用,版权归资源原作者所有,请在下载后24小时之内自觉删除。
3. 不得使用于非法商业用途,商用请支持正版!不得违反国家法律,否则后果自负!
4. 若作商业用途,请购买正版,由于未及时购买和付费发生的侵权行为,与本站无关。
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!

=================================================================

壳先生 » ajax-plus的使用方法介绍(代码)

发表评论

提供最优质的资源集合

立即查看 了解详情