关于javascript:JS深挖异步方案发展史-回调函数Promise和asyncawait

 本章围绕 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 , 此时是异步操作，会立刻异步执行 then / catch 对应的内容，而后回来执行同步代码；3) 如何解决：- 要害：Promise 自身相干操作都是同步的，只是能用来获取异步完结的后果并即便解决
   - 通过创立 Promise 对象，异步操作放对象里;
   - resolve（）和 reject（）自身都是同步的操作，只是放在异步函数中，用来捕捉异步完结并扭转以后状态；- .then 是实现异步的外围，它会在 Promise 状态扭转的同时，获取返回的后果，若以后状态未扭转，就 push 进数组，当 resolve 或 reject 执行的时候，将数组中的函数执行；4）输入后果技巧汇总：- 链式调用，留神.then（）肯定会返回一个 Promise 对象：上一个 then（）若返回 Promise 对象，则用这个对象的状态和 value；上一个 then（）若返回数值，则返回 Promise<fulfilled>，value 为数值；上一个 then（）若无返回值，则返回 Promise<fulfilled>，value 为 undefined；- 链式调用判断输入时，转化成单层调用的形式进行判断，但仅供判断（具体看参考）；第一种，下级 then 没有返回值，转化成一级的模式进行判断；第二种，下级 then 有 return 值，上级 then 必须在下级完结后，能力持续；

4、async/await

1）是什么？为何引入？2）如何应用？3）比 Promise 的劣势？4）代码输入题技巧？

答：

1）是什么，引入起因：async 函数是 Generator 函数的语法糖，应用 关键字 async 来示意，在函数外部应用 await 来示意异步
    引入 async/await 解决异步是因为 Promise 存在以下问题：- Promise 的链式调用构造还是有些简单；- Promise 的两头值传递麻烦；- Promise 的谬误捕捉十分冗余；2) 怎么用：- 用同步的形式执行异步的操作；- 在 async 函数中，await 规定了异步操作只能顺次执行；- async 函数前面跟 Promise 对象能力实现成果；- async 函数自身返回的是 Promise 对象，对象值与返回值无关；3）比 Promise 的劣势：- 代码更加同步，Promise 的.then 链式调用还是有些简单；- 解决了 Promise 的两头值传递麻烦；- 有成熟的 try/catch，不像 Promise 的谬误捕捉十分冗余；4）代码输入：【✨】- 若 await 执行 async 外部的函数，如 async fn()，会阻塞原执行环境，接着分为两种状况
   - 若 fn 是同步执行，立刻返回，那么阻塞的环境作为一个微工作退出微工作队列；- 若 fn 是异步工作，则退出对应队列，而阻塞环境等 fn 执行完后，退出微工作队列；

// 代码 1（回调天堂）http.get('https://api.github.com/users', function(users) {
  /* Display all users */
  console.log(users);
  http.get('https://api.github.com/repos/javascript/contributors?q=contributions&order=desc', function(contributors) {
  /* Display all top contributors */
    console.log(contributors);
    http.get('https://api.github.com/users/Jhon', function(userData) {
    /* Display user with username 'Jhon' */
      console.log(userData);
    });
  });
});