Promise奥义

Promise的产生来自于一个前端的经典问题——回调地狱。

什么是回调地狱（又称函数瀑布）？ 像下面这样的代码就是最简单的回调地狱，为了在异步任务中，按照想要的顺序执行代码
我们就得按照回掉地狱的样式去写代码，而为了解决这一问题，一群聪明的“老头”就发明了promise>

  setTimeout(function () {  //第一层
           console.log('最开始执行');
           setTimeout(function () {  //第二程
               console.log('第二个执行');
               setTimeout(function () {   //第三层
                   console.log('第三个执行');
               }, 1000)
           }, 2000)
       }, 3000)

像是上面这样的代码十分的冗余，尤其是在项目中会变得更加的难以维护。

下面来讲一下Promise

首先promise是一个对象，是一个构造函数，接受一个函数作为参数，它有自己的三个状态，如果在promise后面没有加处理方法，那么他的返回值就是三种状态中的一个，还是一个promise对象（链式）。

• 初始态 pending
• 成功态 fulfilled -----<resolved
• 失败态 rejected

---

同时，它有自己的三个方法：

• then：用于处理 Promise 成功状态的回调函数。
• catch：用于处理 Promise 失败状态的回调函数。
• finally：无论 Promise 是成功还是失败，都会执行的回调函数。

const promise = new Promise((resolve, reject) => {
 // 异步操作
 setTimeout(() => {
   if (Math.random() < 0.5) {
     resolve('success');
   } else {
     reject('error');
   }
 }, 1000);
});

promise.then(result => {
 console.log(result);
}).catch(error => {
 console.log(error);
}).finally(() =>{
console.log("无论如何我都打印出来"});
);

   当 Promise 被构造时，起始函数会被同步执行：

在上面的例子中，我们使用 setTimeout 模拟了一个异步操作。如果异步操作成功，则调用 resolve 函数并传递成功的结果；如果异步操作失败，则调用 reject 函数并传递失败的原因。然后我们使用 then 方法处理 Promise 成功状态的回调函数，使用 catch 方法处理 Promise 失败状态的回调函数。

   这段程序会直接输出 error 或 success。

resolve 和 reject 都是函数，其中调用 resolve 代表一切正常，reject 是出现异常时所调用的。

new Promise(function (resolve, reject) {
   console.log(1111);
   resolve(2222);
}).then(function (value) {
   console.log(value);
   return 3333;
}).then(function (value) {
   console.log(value);
   throw "An error";
}).catch(function (err) {
   console.log(err);
});

resolve() 中可以放置一个参数用于向下一个 then 传递一个值，then 中的函数也可以返回一个值传递给 then。但是，如果 then 中返回的是一个 Promise 对象，那么下一个 then 将相当于对这个返回的 Promise 进行操作，这一点从刚才的计时器的例子中可以看出来。

reject() 参数中一般会传递一个异常给之后的 catch 函数用于处理异常。
但是请注意以下两点：

• resolve 和 reject 的作用域只有起始函数，不包括 then 以及其他序列；
• resolve 和 reject 并不能够使起始函数停止运行，别忘了 return。

异步函数 async await

function print(delay, message) {
    return new Promise(function (resolve, reject) {
        setTimeout(function () {
            console.log(message);
            resolve();
        }, delay);
    });
}

async function asyncFunc() {
    await print(1000, "第一次");
    await print(4000, "第二次");
    await print(3000, "第三次");
}
asyncFunc();

异步函数 async function 中可以使用 await 指令，await 指令后必须跟着一个 Promise，异步函数会在这个 Promise 运行中暂停，直到其运行结束再继续运行。
异步函数实际上原理与 Promise 原生 API 的机制是一模一样的，只不过更便于程序员阅读。