- 业务场景:页面搜索功能,输入框边输入边搜索,点击键盘上的回车也可以搜索,当边输入边搜索结果还处于loading状态时,又去点击回车,会再次发送请求,并返回2条一模一样的数据。
- 预期效果:只需要返回1条数据。
- 解决办法:axios官方文档有cancelToken属性可以取消。
- 项目情况
- 这是项目中统一封装的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 => {
// 省略代码...
})
}
这样,就可以达到重复请求的时候,取消上一次未返回结果的请求的目的。
网友评论