day07/下午/142-尚硅谷-尚融宝-删除功能流程优化

那么在咱们的这个刚才这个代码结构里呢，你会看到就有个then是吧，然后then里面又嵌套了一个then是吧？啊，我们把这个then呢叫做then的嵌套啊，如果我们应用程序当中这种then啊then啊嵌的特别多的话，那么整个业务功能的逻辑啊，就会，嗯，有点不太好理解啊，现在才两个的还好啊，如果未来程序功能特别复杂的话，可能嵌套嵌套嵌套啊，我们管它叫回调啊，嗯，然后不不断的嵌套，我们管它叫回调地域。就前端专门有这么一个词，叫回调低。那回调地域什么叫回调地域呢？就是then里面有这个先头函数对吧，然后这里面呢，又一大堆代码格啦，然后又一个then，然后又一个箭头函数啊，然后呢，这里面又嗯吧一堆代码，然后又一个在。

然后又一个箭头函数啊，有的时候我们前端功能特别复杂的时候呀，这种情况经常会出现，结果你会发现呢，这个代码嵌套在嵌套单阶的一会儿你就晕了，你也不知道先执行哪个，后执行哪个，全都乱套了，有逻辑，所以呢，我们就避，要避免这个回调地域的产生呢，我们有一个解决方案，就是什么呢？就是把问串联起来，什么叫把问串联起来呢？就是首先前面这是一个方法吧，啊，然后它调用了问，那比如说这个方法呢，叫A方法。好，这个方法呢，叫B方法啊，然后这个方法可能叫X方法哈，好，那这样一个一个调，调完了之后呢，我们不想让它回调，那怎么办？在这个位置啊，我们把字就不写在这了，写在哪，写在这就串着写，你不要嵌套写，但是串着写的前提呢，是这个A给回来。

这样的话就可以串着去了，什么意思就是它，因为它肯定是个异步嘛，我们现在调的这个then，前面的这个都是一个远程方法啊，X调用的远程API，所以它肯定是一个异步的，异步就会就意味着它和它一定要返回结果之后再来执行后面的then啊，然后接下来呢，这个then也是一样的，我们把它剪切出来，然后这块呢写尺寸，然后这块呢，把then写到这，大家看现在呢，这种结果呢，跟刚才的结果其实是。调用的流程是一致的，都是什么呀，这个方法执行完了之后。异步的方法执行完了之后，再执行这个N里面的方法，然后这个N里面的方法，这个A执行完了之后再执行这个N，那每一个方法都会有一个返回值吧，这个方法执行完后的返回值会在这儿获取，那这块就有个response，好，这个方法执行完事之后的返回值会在这儿过取，那这块就有一个response，嗯，这个方法执行完后的值会在这过取，这块就有一个response，我不知道，我说没说明白哈，所以呢，大家看现在这个呢，就是串联了，意思就是我先执行它回调完了。

执行then里面，Then里面又执行了一个异步的，异步的这个回调完了执行这个then then里面又执行一个异步的，异步完了再执行这个的，所以他们是有先后顺序的，一定是前面的异步方法执行完再进入到后面的then，那里面的异步方法又执行完再进到后面的的，所以呢，就比刚才咱们的那种嵌套的这个格式呀，可读性会稍微高一些，总之你可以知道1233个步骤，对吧？嗯。好，那咱们这个怎么改呢？根据咱们刚才说的，是不是把它这个灯在哪，这灯在这啊，把它是不是剪出来呀，剪出来是不是放在前一个凳子后面呀，放前一个凳的后面。

然后前一个then里面的这个是不是加个return呀，这样的话就跟后面这个一样了嘛，啊好，然后那这个response就是它的返回值返回结果了，明白吧，嗯，所以这样的话呢，我们就把这个啊串联的就是嵌套的格式的的改成这种串联格式的的了啊，我再强调一遍，把den从嵌套这个里面拿出来，拿到这个den的后面去，而不是放在这个den的里面，然后接下来前面这个den的这个异步方法，一定要有一个称才行啊，加一个称啊，这样的话呢，它的响应结果才会在这个地方被接收到。啊，所以这块呢，就是整个我们对这个流程的一个小小的优化，但是优化完了之后是不是就可以了呢，我们先来看一下啊，在这个地方先。

点这个删除点确定好，这个是没问题的，然后再点这个删除点取消好。这个也是没问题的啊，那我们删除确定也没问题，取消也没问题，那我们还来测什么呢？还来测失败的情况，什么叫失败呢？比如说后面的服务器down了。这服务器down了，我把它点停当了，这个肯定失败对吧，还比如说就是有一些业务逻辑的错误了，或者是说我们先弄一个最简单的失败，比如说这个地方它URL地址错了也会失败，对吧？啊好，总之你就先随便弄一个失败啊，失败的时候呢，我们点击删除，点击确定，它一定会失败，因为ul地址是错的，然后所以就让他点击确定。大家看是不是有问题，弹出了两个内容，一个是什么叫network AR，一个叫已取消删除，其实我们并没有取消，我们是做了什么呀，我们是做了删除失败了，就是我们做删除了，但是他失败了，但是他失败了的话，你弹出错误就行了，这个叫网络错误，对吧，你还为什么又要弹出一个已取消删除呢？这就是我们这块的这个业务逻辑了。

这块有点复杂啊，注意听这是什么业务逻辑呢？就是首先说一下，刚才咱们这个流程，先删除这个，先确问你要不要删对吧，你说行，我要删，要删就点这个确定按钮，然后因为点了这个确定按钮，所以进入到了这个的，进入到了这个D之后，我们就调用远程的API接口，好通过这个API来调用，调用远程的API接口之后，如果我们点击了确定之后。那么这个API还。失败了，为什么失败？因为这个地址错了，对不对，好，那么就会来到哪儿呢？注意哈，就会来到。

我们的响应拦截器那个地方，在响应拦截器那个地方，它会处理失败，因为我们这个地方是处理成功对吧，好在响应拦截器哪块呢这个。request.js打开。从上往下捋，这个地方就是我们响应拦截器，在响应拦截器里面，因为失败了，而且是一个HTTP失败哈，看F12，看F12。点击这个删除，点击确定好，这是什么失败，HTTP失败就是它的返回值根本就不是200，它的返回值就是一个错误的返回值，对不对啊，如果是错误的返回值呢，它就走不到我们的哪个地方来呢。走不到我们的。就是2万或者是零这个地方来，也走不到我们的这个response这个地方来，它会走到我们响应拦截器里面的I这个节点，这个就是HTTP失败，就是你这个地方是红色的是吧？啊好，然后这种HTTP失败呢，它走到irow了，走到irow之后就会展示这个错误信息，这个错误信息呢，就是HTTP的错误信息，然后我们来看一下这个pencil这块是不是展示了一个A。

Irrow啊，ER network I它是在哪打印出来的呢？是在这打印出来的ERER，然后这个其实就是network了啊，然后。这个message在这个地方bug一下，这块有点复杂哈，Debug一下啊好，那我们来看啊。那这个地方我我点删除，然后点确定好，是不是进入到这个第八个了，进入到这个第八个之后，我下一步我看哪个是下一步。Master。Step。

真的哈，下一步。然后看，这不是来到这儿了吗？来到这之后呢，他要在控制台上打消息了啊，我们找到这个控制台，然后看。看这个。第八个呢，我看一下啊。啊，这呢哈，然后呢，点下一步，好，这个控台上的消息呢，就打印出来了，打印在哪了呢？打印在这了，看这叫irow arrow network arow在哪打印出来的呢？填source啊，就是在刚才这个地方打印出来的，明白吧，然后接下来打印完这个消息之后啊，就是打印完这个控制台消息之后，我们再走到下一步的时候，就开始谈这个message了，所以我们走下一步。好，大家看。我在这个执行完，你看是不是刚才的那个network arrow那个message就弹出来了，但是一闪而过，同时又弹了一个什么呀，已取消删除，已取消删除它是怎么走的，注意在这个位置。

当他谈完那个红色的network arrow之后呢，在这个地方又写了一个return promise reject，这个叫什么呀？叫把当前的这个AR状态的这个promise又置为一个失败，又置为失败之后呢，它就会顺着我们代码当中的。这个的。这个凳啊，就是刚才我们是进入到这个里面嘛，然后走这个后台的这个API接口嘛，走后台的API接口之后呢，走入到request的这个errorrrow嘛，走到request这个errorrrow之后呢，是不是把这个AR里面的这个promise状态给它设置为失败了，设置为失败之后，刚才是从哪进到这来的，是从。这个地方进进来了吧，好，那么他就会走这个then后面的失败，这个的后面的失败是哪个是catch就跑这儿来了，所以呢，就展示了一取消删除。

这个流程有点复杂，大家了解一下就可以了啊，那么为了避免他错误的时候，最后走到catch展示了一个取消删除，这个逻辑就不对了，所以呢，我们得在这个地方呢判断一下诶。这个cash这块呢，其实有一个E这么一个参数啊，我们先把这个ER这个参数给它打印一下cancel.lo ER ER好。嗯，E太的E吧，好这样写啊，我们来看啊，就两种不同的情况，第一种情况呢，就是刚才咱们说的那个失败了，走到已取消删除了，在看CE这块，看打印了什么。好，如果是失败了，我们把这个断点跳过去，如果是失败了，展示与取消删除，我们这边打印的就是。

ER的arrow打印的是这个东西。Catch的arrow打印的是这个东西，就是network arrow嘛，跟上面一样，它因为它是失败了嘛，好，如果是真的取消了点取消，好，那么cash的errorr展示的是cancel，所以这两种情况呢，都走了这个取消，但是前面失败的时候，其实我不想走取消，所以呢，这个cancel我呢就要在这个地方给它判断了，如果。ER or等于等于cancel的话，那么我再展示这个电message这块有点复杂，大家课下的时候自己捋一捋啊，明白吗？也就是说我们有两种情况弹出来这个取消，第一种情况呢，就是点删除的时候，然后点确定的时候。他他错误的弹出了取消，第二种情况呢，就是点删除，点取消的时候，我们才应该让他弹取消，那么刚才我们通过断点调试，还有通过控制台的输出，我们发现当点击确定的时候，它实际上那个I的值啊是这个。

当点击取消的时候，我们IO的值呢叫cancel，那我们点击确定的时候，我不想让他弹那个已取消删除，那么你就判断一下，当I的值是这个的时候，我们再让它弹已取消删除，否则的话就不谈已取消删除了，所以在这个地方就进一步判断啊，好，然后接下来呢，我们再实验一下。点击删除，点击取消啊，这块是一个取消删除，然后呢，点击。点击删除，点击确定好，然后断点过来，你看他只弹那了，就网络错误了，就不再弹那个取消删除，已取消删除那个信息框了，也就是说这个信息框它不是没有这个规律的，弹了，当我们取消的时候它才弹，当我们删除失败的时候，他就不会弹了。

不知道大家理不理解啊，所以这个课下的时候，大家根据视频吧，我们再好好的去走一下这个流程，这块的这个流程可能就算我们前端的这个代码当中一个比较复杂的业务了，如果这块的流程你能搞明白了，那么前端的代码呢，后面就没有什么能够特别难的内容了，这块算是最复杂的一个啊，就因为有好几个N跳来跳去，然后在这个catch里面还有一些说法，然后另外呢，在第一个灯里面呢，又跳转到了我们的响应拦截器的这个arrow里面，是不是啊，所以这个流程呢啊，把它搞清楚啊，还有这块呢，就是我们刚才做的整个的这样的一个业务了，然后呢，我先把我们的这个给他还原回来啊，好，我们的删除功能呢就到这了。