10. vue axios 请求未完成时路由跳转报错问题

axios 请求未完成时路由跳转报错问题

前两天项目基本功能算是完成了，在公司测试时遇到了遇到了一个问题，那就是在请求未完成时进行路由跳转时会报错，想了几种办法来解决，例如加loading，请求拦截，还有就是路由跳转时取消之前的请求。

这里我用的是路由跳转时取消之前的请求

问题解决方法

data() {
    return {
        source: null,
    }
},
method(){
    cancel() { // 取消请求
      this.source.cancel('这里你可以输出一些信息，可以在catch中拿到')
    },
    getData(url){
        this.source = this.axios.CancelToken.source(); // 这里初始化source对象
        let params = {}
        this.axios.get(url,{
                cancelToken: this.source.token,// 这里声明的cancelToken其实相当于是一个标记，当我们要取消请求的时候，可以通这个找到该请求
                params
         }).then(res=>{
                // 成功执行
         }).catch(res => {
            // 如果调用了cancel方法，那么这里的res就是cancel传入的信息
            // 你的逻辑
            this.cancel()
          })
    }
}

netWork

显示

这样就可以取消那些加载慢的请求，我没有封装请求，所以只能一个一个的取消，当然可以封装个请求拦截器，直接在拦截器中取消请求。

但回到家又试了下，基本不会有问题公司的网太慢了，请求相应的也比较长