标签：url length promise div route @param 作用 reac one
CancelToken常用在封装的请求中，用来取消上一一面axios请求
在路由跳转时，若当前页面的数据量过大，而我们立即点击跳转下一页面，那么可能会出现，当前页面接口还在pending状态，页面已经跳到新页面，旧的请求依旧没有停止。
这将会十分损耗性能，这时我们应该先取消掉之前还没有获得相应的请求，再跳转页面。这就是CancelToken的作用
1. 在main.js里写一个全局httpRequestList的空数组，用来装我们的cancel函数：
// cancelToken中的cancel函数 Vue.$httpRequestList = [];
2. 在封装的get和post请求里面，将cancel函数推入httpRequestList数组：
/** * 封装get方法 * @param url * @param data * @returns {Promise} */ export function get(url, params) { const CancelToken = axios.CancelToken; return new Promise((resolve, reject) => { axios.get(url, { params: params, cancelToken: new CancelToken(function executor(c) { Vue.$httpRequestList.push(c) //存储cancle }) }) .then(response => { resolve(response.data); }) .catch(err => { reject(err) }) }) } /** * 封装post请求 * @param url * @param data * @returns {Promise} */ export function post(url, data) { const CancelToken = axios.CancelToken; return new Promise((resolve, reject) => { axios.post(url, data, { cancelToken: new CancelToken(function executor(c) { Vue.$httpRequestList.push(c) }) }) .then(response => { resolve(response.data); }) .catch(err => { reject(err); }) }) }
注意，get请求的时候，cancelToken是放在第二个参数里；post的时候，cancelToken是放在第三个参数里。
3. 在路由守卫中，写一个执行cancel方法的clearHttpRequestingList方法，在每次跳转之前执行clearHttpRequestingList()函数
标签：url length promise div route @param 作用 reac one
原文地址：https://www.cnblogs.com/qlongbg/p/12966813.html
