Vue+typescript封装axios取消上一次未完成的请求

项目场景

需求:模糊搜索边输入变查询(假设输入很快,输入之后500ms请求一次),查询条件越多查询结果越快(符合条件的数据越少啊)

问题:有时候上一次输入请求的结果非常慢(还未返回),然鹅我输入的一下个查询请求已经返回了(第二次请求的接口比上一次快),那么显示的查询结果就是上一次的查询结果,说到底就是查错了,这样的用户会懵逼啊;

其他应用场景:适用于任何接口请求频繁(如也适用于重复提交,只取最后一个有效的,其余取消请求;比如切换菜单更新对应菜单下的商品,切换第二个的时候上一个还未返回(它们的商品装在同一个篮框里的)

注意:重复提交或者切换操作一般都很快,所以可能上一次发出的还没返回你就发了第二次,这种情况就取消上一次,如果网够快或者性能够好上一次的已经返回了,你才发的第二次那么取消请求就不会执行了

如何解决?

在输入一下个查询的时候,如果上一个请求接口未完成,直接将上一个未完成的查询请求中断取消。

axios官网给出了取消请求的方法:axios.CancelToken

官网地址:www.axios-js.com/zh-cn/docs/…

//本文只对模糊搜索接口进行中断上一次请求的处理,如需对全部接口进行处理,去掉拦截器的if条件限制即可
// 取消请求
const CancelToken = axios.CancelToken;
let axiosCancel:any = null //定义存放取消的请求方法
/**
 * 创建 axios 实例
 */
const service = axios.create({
  timeout: 3000,
  withCredentials: true
})

/**
 * req 拦截器
 */
let requestText:any;
service.interceptors.request.use((config: any): object => {
    if (config.params && config.params.searchingText) {
        //模糊查询的时候避免输入太快,直接取最后一次请求返回的结果
        requestText = config.params.searchingText;
        if(typeof axiosCancel === 'function'){
            //在请求发出前取消上一次未完成的请求
            axiosCancel('终止请求'); //取消请求
        }
        config.cancelToken = new CancelToken(function executor(c:any) {
            axiosCancel = c;
        });
    }
  return config
}, (error: any): object => {
  return Promise.reject(error)
})

/**
 * res 拦截器
 */
let responseText:any;
service.interceptors.response.use((response: any) => {
    if (response.config.params && response.config.params.searchingText) {
        responseText = response.config.params.searchingText;
        axiosCancel = null
    }
    const res = response.data
    return Promise.resolve(res)
  },(err:any)=>{
        if (axios.isCancel(err)) {
            console.log('Rquest canceled:', err.message); //请求如果被取消,这里是返回取消的message
        } else {
            if (err && err.response) {
                switch (err.response.status) {
                    case 401:
                        Logout({}).then((res:any)=>{
                            location.href = res;
                        })
                }
            }
            return Promise.reject(err)
        }
  })
  
  //封装GET,POST,PUT,DELETE,PATCH请求
export const GetBuilder = (url:any, params = {}) => {
    return service.get(url, {params:params})
}

export const DeleteBuilder = (url:any, params = {}) => {
    return service.delete(url,{params:params})
}

export const PatchBuilder = (url:any,data = {},params={}) => {
    return service.patch(url,data,{params:params})
}

export const PostBuilder = (url:any,data = {},params={}) => {
    return service.post(url, data,{params:params})
}

export const PutBuilder = (url:any,data = {},params={}) => {
    return service.put(url, data,{params:params})
}



复制代码

转载于:https://juejin.im/post/5cff1563e51d455ca043621e

你可能感兴趣的:(Vue+typescript封装axios取消上一次未完成的请求)