axios

在vue中经常使用axios发起网络请求，与服务器进行数据交互。在使用过程中会有许多问题存在，比如由于网络不稳定导致请求超时/失败，通常有两种解决方案，一种是提示用户重新提交请求，另一种是进行相关提示并自动重新发送请求。第二种方式用户体验明显高于第一种方式。本文就针对第二种方式设计一个解决方案。 DEMO(https://yes-lee.github.io/axios-tutorial/) 拦截器 基本所有的网络请求库都有拦截器接口，包括请求拦截器和响应拦截器。axios设置拦截器的接口为axios.interceptor.request.use(cb, errCb)和axios.intercepter.response.use(cb, errCb)，拦截器可以设置多个，按照设置的顺序执行。 请求失败 请求失败无论是网络异常还是其他原因，都会走到响应拦截器里，因此对于请求结果的相关处理，重点放在响应拦截器上，而请求异常的处理则放在响应拦截器的第二个回调函数里面。 解决方案 思路很简单，在响应拦截器中拦截到异常信息，通过分析异常信息来直接从拦截器中重新发送请求。整个过程对于调用请求的业务代码中来说是毫无感知的，只需等待resolve结果即可。 实现 首先，经过测试得到请求超时的错误代码是ECONNABORTED，网络连接异常没有错误代码，可以直接通过error.message === 'Network Error'进行判断。 const httpClient = Axios.create(defaultConfig) httpClient.interceptors.response.use(null, err => { // 异常处理 const { config, code, message } = err if (code === 'ECONNABORTED' || message === 'Network Error') { // 请求超时 console.warn(`请求超时，将在${defaultConfig.retryDelay / 1000}秒后重试`) return new Promise(resolve => { setTimeout(async _ => { resolve(await httpClient.request(config)) }, defaultConfig.retryDelay) // 设置发送间隔 }) } // 可以进行相关提示等处理 return Promise.reject(err) }) 经过错误代码判断，需要进行重新发送的时候，将请求的 config 直接传入httpClient....