利用axios拦截器实现请求中的按钮禁用

需求描述

之前考虑过这样一个需求,就是在axios请求过程中,禁止按钮的二次点击而产生重复的网络请求,请求结束或者失败之后再让按钮启用,而每个按钮单独写方法,当然不是一个好方案,最终我采取了利用axios的拦截器实现了这个需求,现在分享一下大概思路。

拦截器介绍

axios是管道式的系统,他的拦截器基础使用可以通过https://www.kancloud.cn/yunye/axios/234845 查阅一下先。

利用axios拦截器实现请求中的按钮禁用
上图为axios拦截器

按钮控制实践

1. 传递按钮实例$event到请求拦截器

// dom
// 按钮添加如下事件 把参数和event传到方法中
@click="someFn('params1',$event)"

// JS
// 方法中接到参数进行业务处理, 并发送网络请求
someFn(params1, e){
  // params1 仅仅是演示 或者处理业务参数等
   someRequest(params1, e) 
}

// api管理文件
export function someRequest(params1, e) {
    return request({
        url: ...,
        method: 'post',
        data: params1,
        btn: e ? `${e.target.id}` : false // 提取id信息, 并自定义传递内容btn
    })
}

2. 拦截器接受并提取id信息,通过DOM操作进行按钮disabled

// axios封装
// 请求拦截器 拿到按钮id并禁用
service.interceptors.request.use(config => {
  let btn = config.btn // 这里就拿到请求的按钮ID啦
  if (btn) {
      $('#' + btn).attr('disabled', 'disabled')
  }
})

3. 请求完成/失败,通过管道继续接收到所操作的按钮id然后释放disabled属性

// 响应拦截器 请求完成后, 把按钮取消禁用
service.interceptors.response.use(
    response => {
        let btn = response.config.btn 
        // 这句比较重要,返回是有config对象可以用的

        if (btn) {
            $('#' + btn).attr('disabled', false)
        }
    }
)

以上就是全部内容了,提供的是一种思路,比如返回失败怎么处理,以及进度显示,或者按钮文字显示为loading...之类的,都可以用此方法完成。

分享