[Day16] JavaScript - Promise 物件

• 我们过去在写 JavaScript 使用的同步延迟，通常都是用非同步的 setTimeout 加 callback 来实现，但若有太多复杂的callback，即容易造成callback hell (如下图)。
• 而从ES6开始新增的Promise 物件，就是用来解决同步与非同步的问题，让我们的程序码更为简洁更易维护。
                   
                  图片来源: callback hell

Promise即是「承诺」之意，而产生的结果只有两种，不是「成功」就是「失败」，在程序里的表示方式是"resolve"(成功) or "reject"(失败)，以下为基本语法:

let p = new Promise(function(resolve, reject) {
  if (true) {       
      resolve('success');  // 成功
   } else {
      reject('failed');    // 失败
   }
});

需要先new一个Project物件，物件中包含两个参数: resolve及reject。
resolve会在函式成功或为True的状况下执行，reject 则是在失败或为false的时候执行，resolve 和 reject 都有一个回传值，可将这个会传值透过.then传给下一个流程。

result = true;
let p = new Promise(function(resolve, reject) {
  if (result) {       
      resolve('success');  
   } else {
      reject("failed");    
   }
});

p.then((message) => {
    console.log('This is the then ' + message)
}).catch((message) =>{
    console.log('This is the catch ' + d)


// This is the then success

下面这段也可以这样排列，可读性较高:

p
.then((message) => {
    console.log('This is the then ' + message)
})
.catch((message) =>{
    console.log('This is the catch ' + d)
})

Project这个物件提供了两个方法(method): then()、catch()，如果想在Promise完成後执行後续的动作，我们可以这样定义 p.then()、p.catch():

• p.then的意思是，当这个Promise里的程序执行完之後，且结果是resolve时，就会跳到then这里执行then里的程序。

• p.catch的意思是，当这个Promise里的程序执行完之後，且结果是reject时，就会跳到catch这里执行catch里的程序。
   

• 获取回传值

  • 要在then()里获取resolve的返回值，我们需在then里的回调函数添加一个参数(这里用message)，当resolve函数被调用的时候，小括号里的值就会返回到then()里。
  • 要在catch()里获取reject的返回值，需在catch里的回调函数添加一个参数(这里用message)，当reject函数被调用的时候，小括号里的值就会返回到catch()里，而一般reject返回的值都是错误讯息。

  这些返回值会显现在回调函数里的参数，这样回调函数里的程序码就能使用这些返回值做进一步的处理。

参考资料:
https://www.oxxostudio.tw/articles/201706/javascript-promise-settimeout.html