点击上方关注前端技术江湖，一起学习，天天进步
国庆前刚开发完一个小需求，常规性的做了一次code，不过这次有所不同，我们组前端老油条竟然参会了，平时发会邀都不来的 。
不过不愧是老油条，竟然分分中发现了问题，老油条的地位又在我们小前端的心里巩固了一下 。
和往常一样，前先过一遍技术方案，一让大家快速的了解需求，二来分析下技术方案是否存在问题，是否合理，一般情况下，技术方案没问题，后面的代码感觉就没啥必要了，因为很少有人听 。
就在刚要讲完技术方案，要进入代码阶段，老油条提出了问题，我心想这么简单的需求会有啥问题？
到这里我不得不把需求搬出来，让各位看官瞅瞅，一起来看是否存在这样的问题，换作是你，你会怎样处理 。
需求超简单，上截图
image.png
上面是一个分类数据展示页面，左侧是一级分类，右侧二级分类和三级分类，然后下面是推荐的商品列表 。
就这样一个页面会有什么问题呢？撑死2个接口，一个分类接口，一个商品推荐接口 。
问题在于交互上，左边的一级分类可以随意切换，如果用户不讲武德，不等右边的数据渲染完就切换了，那会给用户带来什么体验呢？
会导致渲染结果混乱，旧数据渲染在了新的分类里 。
解决方案
文章插图
'/>
其实很简单，切换分类时，取消上一个请求 。
怎样实现取消请求呢？
下面咱们就来总结性的看下如何取消一个请求，看哪个方式更简单易用 。
思路：项目中的网络请求模块一般都是基于进行封装，返回一个对象，其实只要把取消掉就可以，其实并不是真正的取消网络请求，而是丢弃返回的数据 。
方法1 - 借助方法
fe都知道一个对象状态的改变是通过和来执行的 。那是不是可以借助方法来模拟呢？
//返回一个promise和abort方法function getPromise() {let _res, _rej;const promise = new Promise((resolve, reject) => {_res = resolve;_rej = reject;setTimeout(() => {resolve('123')}, 5000);});return {promise,abort: () => {_rej({name: "abort",message: "the promise is aborted",aborted: true,});}};}const { promise, abort } = getPromise();promise.then(console.log).catch(e => {console.log(e);});abort();上面的方法可以正常执行，但是不够通用，可以将构造函数内的逻辑提取出来,作为一个回调传进去 。
改造后
function getPromise(cb) {let _res, _rej;const promise = new Promise((res, rej) => {_res = res;_rej = rej;cb && cb(res,rej);});return {promise,abort: () => {_rej({name: "abort",message: "the promise is aborted",aborted: true,});}};}//主逻辑提取出来function runCb(resolve,reject){setTimeout(()=>{resolve('1111')},3000)}const { promise, abort } = getPromise(runCb);promise.then(console.log).catch(e => {console.log(e);});方法2 - 借助 .race()
简单复习下race方法的作用,当有若干个, p1, p2, p3…在调用，let p = .race([p1, p2, p3,…])的时候，返回的p也是一个 。那么p什么时候会被或者被呢？
看race单词的意思就知道它是竞速或赛跑的意思，所以p1, p2, p3 … 最先一个被或者被的结果就是p的或者的结果 。所以后续的的和都不会再被执行了 。
代码很简单，但足够短小精悍 。
//传入一个正在执行的promisefunction getPromiseWithAbort(p){let obj = {};//内部定一个新的promise，用来终止执行let p1 = new Promise(function(resolve, reject){obj.abort = reject;});obj.promise = Promise.race([p, p1]);return obj;}
- 张家辉和张学友是什么关系 张家辉跟张学友是什么关系
- 产品设计-交互原则1
- 路飞打败明哥是第几集 路飞打败明哥是哪集
- 加油大魔王千年之章是什么漫画
- 唐宋八大家是哪些
- G998次是什么高铁
- 卿卿日常是什么电视剧
- 小辣椒影院是什么软件
- 烫管道的是什么东西
- 幽灵的威胁是什么电影