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 => { // 省略代码... }） }
这样，就可以达到重复请求的时候，取消上一次未返回结果的请求的目的。