美文网首页
vue + axios项目,重复请求,在上一次请求还没返回结果的

vue + axios项目,重复请求,在上一次请求还没返回结果的

作者: 3e2235c61b99 | 来源:发表于2020-09-09 19:59 被阅读0次
    1. 业务场景:页面搜索功能,输入框边输入边搜索,点击键盘上的回车也可以搜索,当边输入边搜索结果还处于loading状态时,又去点击回车,会再次发送请求,并返回2条一模一样的数据。
    2. 预期效果:只需要返回1条数据。
    3. 解决办法:axios官方文档有cancelToken属性可以取消。
    4. 项目情况
    • 这是项目中统一封装的axios请求request.js,自行添加一个cancelToken属性。只贴出部分代码,省略中间的响应、拦截封装。
    import axios from 'axios'
    const service = axios.create({
      timeout: null, // 请求超时时间 
    }) 
    service.cancelToken = axios.CancelToken 
     
    // 省略中间代码...
    
    export default service
    
    • 项目中统一管理的api列表
    import request from '@/utils/request'
    let CancelToken = request.cancelToken
    
    // 全局搜索人员接口
    export function queryAllpeople(data, _this) {
      return request({
        url: `/tbrms/userinfo/query `,
        method: 'post',
        data,
        cancelToken: new CancelToken(function executor(c) {
          _this.cancelRequestFn = c
        })
      })
    }
    

    *具体使用该功能的组件

    data() {
        return {
          icancelRequestFn: null, // 取消请求的方法
         }          
    }
    
     methods: {
        searchPerson() {  // 搜索的方法
          if (typeof this.cancelRequestFn === 'function') {
            this.cancelRequestFn(); // 取消请求
          }
    
          let params = {
             // 省略传参的参数...
          };
            
          // 把当前this传过去
          this.$api.addresslistByName(params, this).then(res => {
              // 省略代码...
          })
    }
    

    这样,就可以达到重复请求的时候,取消上一次未返回结果的请求的目的。

    相关文章

      网友评论

          本文标题:vue + axios项目,重复请求,在上一次请求还没返回结果的

          本文链接:https://www.haomeiwen.com/subject/ppdyektx.html