Day 23 - Promise

Promise 解决了回调地狱，在处理一些需要花费比较长时间的任务时使用 Promise 就可以进行非同步的处理，防止阻塞。

使用方式：
利用 Constructor 制作一个 Promise 物件，且 Promise 会接收一个 function 作为参数，传递给 Promise 的 function 有 resolve 和 reject 参数，resolve 表示成功，reject 表示失败。

// Initialize a promise
const promise = new Promise((resolve, reject) => {})
console.log(promise);

这时候开启 Devtool 可以看到 PromiseState 为 pending（进行中），表示 resolve 或 reject 之前的初始状态，因为我们还没设定 resolve 和 reject 要做啥事。

PromiseState 分为三种：

• pending - 进行中
• fulfilled- 操作成功，promise 已解决
• rejected - 操作失败，promise 被拒绝

将 Promise 展开，可以看到里面有 Promise(), catch(), then(), finally() 。

• then() 表示处理 resolve
• catch() 表示处理 reject
• finally() 当一个 promise 被解决时调用，无论结果是成功或是失败都会执行。

接着再将 Promise() 这个 constructor 展开，可以发现里面有许多方法，包含了 resolve(),reject(),race(),all()...等。

• Promise.resolve() 作用为将 PromiseState 由 pending 变成 fulfilled
• Promise.reject() 作用为将 PromiseState 由 pending 变成 rejected
• Promise.race() 用於处理多个 Promise，只要有一个成功，就 return 成功结果，其他的被淘汰，如果全部失败，就 return 失败
• Promise.all() 用於处理多个 Promise，如果有其中一个 Promise 失败全部就失败，而全部的 Promise 都成功才代表成功。

来举个简单的例子～

function fn1(){
  setTimeout(function(){
    console.log(1)
  },0)
}
function fn2(){
  console.log(2)
}
fn1()
fn2()
// 2
// 1

setTimeout() 为非同步事件，即使时间设定 0 秒，JavaScript 也会先跳过它，先往下执行别的动作，最後再回来执行它，所以最终的结果会先印出 2 再印出 setTimeout() 里的 1。

如果我们想要结果如同执行 function 的顺序，先印出 fn1() 再印出 fn2()，可以使用 Promise()。

function fn1() {
  return new Promise((resolve, reject) => {
    setTimeout(function () {
      console.log(1);
      resolve(); // 这个 resolve 会决定 fn 什麽时候会进 then
    }, 0)
  })
}
function fn2() {
  console.log(2);
}
fn1().then(fn2); // 执行後 console.log 的顺序为 1 => 2
// 1
// 2

再来举个不只一个 Promise 的例子：

const PROMISE1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("PROMISE1");
  },0)
})

const PROMISE2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject("PROMISE2");
  },1000)
})

const RES = Promise.race([PROMISE1,PROMISE2]);
console.log(RES)

上面的例子使用 race()，只要有一个成功最终的结果就是成功，而因为 PROMISE1 执行时就 resolve，所以最後 PromiseState 会显示 fulfilled。

将上面的程序码改一下

const PROMISE1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("PROMISE1");
  },2000)
})

const PROMISE2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject("PROMISE2");
  },1000)
})

const RES = Promise.race([PROMISE1,PROMISE2]);
console.log(RES)

因为 PROMISE2 设定的时间比 PROMISE1 短，会先执行 PROMISE2，而 PROMISE2 里面是 reject，所以最後 PromiseState 会显示 rejected，且 PromiseResult 为 PROMISE2。

参考资料：
Promise - MDN
Understanding the Event Loop, Callbacks, Promises, and Async/Await in JavaScript

最後推荐一下不错的资源：

• 详细的教学文章，内含 Pokémon API 串接教学：
  JavaScript Promise Tutorial – How to Resolve or Reject Promises in JS
• 有趣的教学影片：
  JavaScript 你理解Promise吗 - 技术蛋老师
  这个老师的频道里有非常多对面试有帮助的影片，内容都很好笑～