JS解决回调地狱

解决回调地狱的方法

Promise 简化异步操作的回调函数写法
Generator 可以让异步操作停止,达到同步效果
async 是 Generator 函数的语法糖

Promise

Promise 对象代表了未来将要发生的事件，用来传递异步操作的消息。
有三个状态

• pending: 初始状态，不是成功或失败状态。
• fulfilled: 意味着操作成功完成。
• rejected: 意味着操作失败。

优点:就可以将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数。此外，Promise 对象提供统一的接口，使得控制异步操作更加容易。

Promise:无法取消 Promise，一旦新建它就会立即执行，无法中途取消。其次，如果不设置回调函数，Promise 内部抛出的错误，不会反应到外部。第三，当处于 Pending 状态时，无法得知目前进展到哪一个阶段（刚刚开始还是即将完成）。

const myPromise = new Promise(function(resolve, reject) {
 // ... 执行异步操作
 if (/* 异步操作成功 */){
  resolve(value);// 调用resolve，代表Promise将返回成功的结果
} else {
  reject(error);// 调用reject，代表Promise会返回失败结果
}
});

异步执行完成，做一些事情，我们可以通过 promise的then方法来实现,语法：

myPromise .then(function(value){
  // 异步执行成功后的回调
      //value的值是上面调用resolve(...)方法传入的值.
});

如果想要处理promise异步执行失败的事件，还可以跟上catch
Promise.prototype.then 方法返回的是一个新的 Promise 对象，因此可以采用链式写法。

myPromise .then(function(value){
  // 异步执行成功后的回调
}).catch(function(error){
  // 异步执行失败后的回调
})

Promise.all 方法用于将多个 Promise 实例，包装成一个新的 Promise 实例。

var p = Promise.all([p1,p2,p3]);

• 只有p1、p2、p3的状态都变成fulfilled，p的状态才会变成fulfilled，此时p1、p2、p3的返回值组成一个数组，传递给p的回调函数。
• 只要p1、p2、p3之中有一个被rejected，p的状态就变成rejected，此时第一个被reject的实例的返回值，会传递给p的回调函数。

Generator

const fs = require('fs');

const readFile = function (fileName) {
  return new Promise(function (resolve, reject) {
    fs.readFile(fileName, function(error, data) {
      if (error) return reject(error);
      resolve(data);
    });
  });
};

const gen = function* () {
  const f1 = yield readFile('/etc/fstab');
  const f2 = yield readFile('/etc/shells');
  console.log(f1.toString());
  console.log(f2.toString());
};

async

async表示函数里有异步操作，
await表示让出当前线程,紧跟在后面的表达式需要等待结果。返回值是 Promise

const asyncReadFile = async function () {
  const f1 = await readFile('/etc/fstab');
  const f2 = await readFile('/etc/shells');
  console.log(f1.toString());
  console.log(f2.toString());
};

async函数内部return语句返回的值，会成为then方法回调函数的参数。

执行顺序

await会跳出整个async函数来执行后面js栈,等本轮事件循环执行完了之后又会跳回到async函数中等待await,等到了结果,然后执行await之后的代码