温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

ajax-plus的使用案例

发布时间:2020-10-12 15:43:37 来源:亿速云 阅读:99 作者:小新 栏目:web开发

小编给大家分享一下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结合会更棒.

看完了这篇文章,相信你对ajax-plus的使用案例有了一定的了解,想了解更多相关知识,欢迎关注亿速云行业资讯频道,感谢各位的阅读!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI