DeepDiveintoJS-HistoryofAsynchronousSolutions—CallbackFunction,Promiseandasync-await

本章围绕JS中的异步解决问题：1.什么是异步，为什么会出现异步？2.什么是回调函数和回调地狱？3、Promise的介绍和理解？4.async/await的理解和用法？1、什么是JS中的异步？为什么会出现？答：背景：JS执行代码是逐行执行的。只有上一行有结果后，下一行才能继续；但是，有些代码不会在短时间内返回结果。这时候，我们不应该再傻傻地等待，而应该立即继续执行后面的代码，等到代码返回结果后再进行处理。等待结果返回是同步的，不等待结果是异步的。异步外观是为了更高效的代码执行，而不是机械地等待执行；2.什么是回调函数，回调地狱？答：回调函数：回调函数是一个函数作为参数传递给另一个函数，然后在外部函数内部调用回调函数来完成某个操作。为什么需要回调：其实质是对异步编程的一种解决方案，主要用作异步函数执行完成的标志；回调地狱：多个回调函数相互嵌套，导致代码缩进过多，结构混乱，难以更新维护，这种代码结构就是回调地狱；如代码1所示；3、对Promise的理解主要有几个方面1）什么是Promise？2）Promise实现详解；3）Promise是如何解决异步问题的？4）Promise输出结果题技巧总结；答：1）定义：Promise本身是一个构造函数，通过调用内部方法解决异步问题和回调地狱；2）具体实现：-有三种状态：pending、resolved、rejected；-当任务交给Promise时，处于pending状态，只能从pending->fulfilled或pending->reject变化，不会再次变化；-Promise本身是一个同步立即执行功能，只有当它被执行到resolve/reject时，this是一个异步操作时，它会立即异步执行then/catch的相应内容，然后返回执行同步代码；3）如何解决：-关键：Promise本身的相关操作是同步的，但是可以用来获取异步结束的结果即使Processing-通过创建一个Promise对象，将异步操作放在对象中；-resolve()和reject()都是同步操作，只是放在一个异步函数中，用来捕获异步端，改变当前状态；-.then是异步的实现核心，当Promise状态发生变化时获取返回结果，如果当前状态没有变化则压入数组，当resolve或reject执行时，数组中的函数执行；4）输出结果技巧总结：-链式调用，注意.then()一定会返回一个Promise对象：如果前面的then()返回一个Promise对象，则使用该对象的状态和值；如果前面的then()有返回值，返回Promise，value是一个值；如果前面的then()没有返回值，则返回Promise，value为undefined；-链式调用判断输出转为单层调用方法判断时，仅作判断（详见参考资料）；第一种，上层则没有返回值，转成一级形式进行判断；第二种，上层有返回值，下层必须在上层完成后才能继续；4.什么是async/await1)？为什么介绍？2）如何使用？3)优于Promise？4）代码输出题技巧？答：1）什么是什么，引入它的原因：async函数是Generator函数的语法糖，用关键字async表示，函数内部用await表示异步。之所以引入async/await来解决异步，是因为Promise存在以下问题：链式调用结构还是有点复杂；-Promise中间值传递麻烦；-Promise错误捕获非常多余；2）如何使用：-以同步方式执行异步操作；-在async函数中，await指定异步操作只能顺序执行；-async函数后面跟着一个Promise对象来实现效果；-async函数本身返回一个Promise对象，对象值与返回值相关；3)相对于Promise的优势：-代码更加同步，Promise的.then链式调用还是有点复杂；-解决传递Promise中间值的麻烦；-有成熟的try/catch，不像Promise的错误捕获，非常冗余；4）代码输出：【?】-如果await执行了async内部函数，比如asyncfn()，会阻塞原来的执行环境，然后分两种情况——如果fn是同步执行的，立即返回，那么阻塞的环境将作为微任务添加到微任务队列；-如果fn是异步任务，则加入对应的队列，阻塞环境等待fn执行完毕后，加入microtask队列；//代码1（回调地狱）http.get('https://api.github.com/users',function(users){/*显示所有用户*/console.log(users);http.get('https://api.github.com/repos/javascript/contributors?q=contributions&order=desc',function(contributors){/*Dis播放所有顶级贡献者*/console.log(contributors);http.get('https://api.github.com/users/Jhon',function(userData){/*显示用户名为'Jhon'的用户*/console.log(userData);});});});