axios 解决弱网情况的数据处理

• "axios": "^0.25.0",

www.axios-http.cn/docs/cancel…

1、场景：弹窗数据，弱网情况喜爱，编辑弹窗数据接口请求时间较长，在编辑时未响应就以新建模式打开该弹窗，此时新建模式下的弹窗显示了上一次在编辑模式打开弹窗请求的数据

2、当时基于业务，想到了两个方案

2.1 方案一：在关闭编辑弹窗时，断开上次的请求

axios 取消请求 api

import axios from 'axios'

const CancelToken = axios.CancelToken;
const source = CancelToken.source();

axios.get('/user/12345', {
 cancelToken: source.token
}).catch(function (thrown) {
 if (axios.isCancel(thrown)) {
   console.log('Request canceled', thrown.message);
 } else {
   // 处理错误
 }
});

// 抛出取消请求的方法，供页面使用
export function cancelFun() {
   // 取消请求（message 参数是可选的）
   source.cancel('Operation canceled by the user.');
}

2.2 方案二：在编辑/新建谈擦混过组件中做处理，在请求数据接口处做个判断，在编辑模式下，才处理数据赋值的问题

3、说在最后

• 方案一可完全规避此问题，但因为一刀切把所有请求都取消了，一旦有全局性的请求正在处理，就会存在很严重的问题
• 方案二在业务组件里面做了拦截，这样不会影响到其他业务功能，但对组件增加了冗余的逻辑

还没有想到更好的办法，路过的大神可以留下解决方案，在此一拜