前端请求接口超时的疑问

多谢老师回复，我对照视频重新看了axios部分的请求代码并做了一些测试发现如下问题：

1. 请求取消并不是由removePending发起的

   因为我在removePending加了一个console.log，正常的话每次去取消的时候都会打印出来。然而我这边测试发现请求取消后并没有打印任何信息。同时<List>组件中的getList方法中的catch虽然捕获到错误，但是内容却是 timeout of 10000ms exceeded （如图）

2. 刷新首页时同时发起的多个请求只有一次，但是还是会被cancel

   我在request的拦截器中，当key被赋值时会打印了一条key的信息作为一次请求的标志。我在刷新页面时看到每条请求的key都只有一条，因此我推断也不是重复请求引起的错误。 最后附上的是axios部分的代码

axios方法返回的结果我都加了catch方法，但是timeout of 10000ms exceeded仍然出现，不太了解从哪里产生的。而且是在links, topWeek, 还有tips这几个请求间随机发生，除了list的请求

removePending (key, isRequest = false) {
    if (this.pending[key] && isRequest) {
        this.pending[key]('取消重复请求')
        console.log('正在取消！', key)
    }
    delete this.pending[key]
}


//请求拦截器
Interceptors (instance) {
    // Add a request interceptor
    instance.interceptors.request.use((config) => {
        // Do something before request is sent
        const key = config.url + '&' + config.method
        console.log('check-key', key)
        this.removePending(key, true)
        config.cancelToken = new CancelToken((c) => {
            this.pending[key] = c
        })
        return config
},
    function (error) {
        // Do something with request error
        return Promise.reject(error)
    })

//其他代码。。。    
}

另外一个帖子我也回复你了，注意查看！

如果确定不是自己的逻辑问题，可以从：

1. 环境：浏览器、网络角度排查；

2. 后台接口：autocannon测试重复请求的响应的性能（一般不可能是服务端的问题，node的IO性能还不错）