场景：发送多次请求后，返回数据要渲染到页面时，销毁DOM元素。如果此时要渲染，就会报错。比如react在useEffect请求数据时，组件被销毁useEffect(()=>{letdataPromise=newPromise(...);letdata=dataPromise().then();//TODO接下来处理数据，这个组件此时可能已经被销毁了，dom不存在，所以需要打断下面的Promisereturn(()=>{//当TODO组件销毁时，打断或取消dataPromise})});可以把生成的Promise对象再包装一下，返回一个新的Promise对象，我们在新对象上添加了一个cancel方法，用于取消。这里的原理是防止Promise对象执行cancel方法中的then()方法。functiongetPromiseWithCancel(originPromise){letcancel=(v)=>{};让isCancel=false;constcancelPromise=newPromise(function(resolve,reject){cancel=e=>{isCancel=true;reject(e);};});constgroupPromise=Promise.race([originPromise,cancelPromise]).catch(e=>{if(isCancel){//主动取消时，不会触发外层catchreturnnewPromise(()=>{});}else{returnPromise.reject(e);}});returnObject.assign(groupPromise,{cancel});}//使用下面的constoriginPromise=axios.get(url);constpromiseWithCancel=getPromiseWithCancel(originPromise);promiseWithCancel.then((data)=>{console.log('渲染数据',data);});promiseWithCancel.cancel();//取消Promise，不会进入then()渲染数据
