vue + axios项目，重复请求，在上一次请求还没返回结果的情况下，把上一次请求取消掉...

1. 业务场景：页面搜索功能，输入框边输入边搜索，点击键盘上的回车也可以搜索，当边输入边搜索结果还处于loading状态时，又去点击回车，会再次发送请求，并返回2条一模一样的数据。

2. 预期效果：只需要返回1条数据。

3. 解决办法：axios官方文档有cancelToken属性可以取消。

4. 项目情况

 　　* 这是项目中统一封装的axios请求fetch.js，自行添加一个cancelToken属性。只贴出部分代码，省略中间的响应、拦截封装。

import axios from 'axios'
const service = axios.create({
  timeout: null, // 请求超时时间 
}) 
service.cancelToken = axios.CancelToken 
 
// 省略中间代码...

export default service

 

　　* 项目中统一管理的api列表

import Ajax from './fetch'
import until from '@/utils/utils' 
let baseApiPath = until.baseApiPath
let CancelToken = Ajax.cancelToken

addresslistByName(params, _this) { // 搜索
    return Ajax({
      url: `${baseApiPath}/wx/address/bookPerson/addresslistByName`,
      method: 'get',
      params: params,
      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 => {
          // 省略代码...
      }）
}

 

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

 

转载于:https://www.cnblogs.com/c-ms/p/11201233.html