本篇文章给大家带来的内容是关于ajax-plus的使用方法介绍（代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
ajax-plus
基于axios 的 Vue 插件
如何使用
npm 模块引入
首先通过 npm 安装
npm install --save ajax-plusoryarn 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为objectthis.$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中.
比如
按钮1
登录后复制
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结合会更棒.
以上就是ajax-plus的使用方法介绍（代码）的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2738006.html
