填坑-十萬個爲何？（18）

簡介:不少概念不清或忘記，從新構建本身的知識體系。天天問本身1~多個問題。我是菜鳥 成爲大神之路!

1.學習Promise？

• Promise 對象用於表示一個異步操做的最終狀態（完成或失敗），以及其返回的值。
• 每個異步任務馬上返回一個Promise對象，因爲是馬上返回，因此能夠採用同步操做的流程。這個Promises對象有一個then方法，容許指定回調函數，在異步任務完成後調用。

異步操做:此內容在第 19 天進行講解。

①傳統的多層嵌套回調函數的寫法？

//例：依次執行step1,step2,step3,step4
step1(function (value1) {
    step2(value1, function(value2) {
        step3(value2, function(value3) {
            step4(value3, function(value4) {
                // Do something with value4
            });
        });
    });
});

// Promises的寫法
(new Promise(step1))
  .then(step2)
  .then(step3)
  .then(step4);
複製代碼

傳統的回調函數寫法使得代碼混成一團，變得橫向發展而不是向下發展

②Promise的語法？

new Promise( function(resolve, reject) {...} /* executor */  );
複製代碼

• Promise構造函數執行時當即調用executor 函數， resolve 和 reject 兩個函數做爲參數傳遞給executor（executor函數在Promise構造函數返回新建對象前被調用）。
• resolve和reject 函數被調用時，分別將promise的狀態改成resolve -> fulfilled（完成）或reject -> rejected（失敗）

`例子1`
  function asyncPro(msg){
        return new Promise(function (resolve,reject) {
            console.log(msg+'：promise準備階段');
            resolve(msg+'成功！');//任務成功時被調用
            reject(msg+"失敗！");//任務失敗時被調用
        });
    }
    asyncPro('第一步').then(function (msg) {
        console.log(msg);
        return asyncPro('第二步');
    }).then(function (msg) {
        console.log(msg);
        return asyncPro('第三步');
    }).then(function(msg){
        console.log(msg);
    });

`打印結果：`
    第一步：promise準備階段
    第一步成功！
    第二步：promise準備階段
    第二步成功！
    第三步：promise準備階段
    第三步成功！
    
    
`例子2`
let prom = new Promise(function (resolve, reject) {
      console.log('：promise準備階段');
      let num = 0;
      resolve(num+1);//任務成功時被調用
      reject("失敗！");//任務失敗時被調用
    });

prom.then(function (msg) {
      console.log(msg);
      return msg+1;
    }).then(function (msg) {
      console.log(msg);
      return msg+1;
    }).then(function (msg) {
      console.log(msg);
    });

`打印結果`
    ：promise準備階段 
    1
    2
    3
複製代碼

③ Promise.prototype.then()方法參數 和 返回對象

• then(onFulfilled, onRejected)方法返回一個Promise。它最多須要有兩個參數：Promise 的成功和失敗狀況的回調函數。
• onFulfilled
  當Promise變成接受狀態（fulfillment）時，該參數做爲回調函數被調用。該函數有一個參數，即接受的最終結果（the fulfillment value）。若是傳入的 onFulfilled參數類型不是函數，則會在內部被替換爲(x) => x，即原樣返回 promise 最終結果的函數
• onRejected
  當Promise變成拒絕狀態（rejection ）時，該參數做爲回調函數被調用。該函數有一個參數，即拒絕的緣由（the rejection reason）。

let p1 = new Promise(function(resolve, reject) {
  resolve("Success!");
  // or
  // reject ("Error!");
});

p1.then(function(value) {
      console.log(value); // Success!
    }, function(reason) {
      console.log(reason); // Error!
    });
複製代碼

then()方法返回一個Promise，而它的行爲與then中的回調函數的返回值有關：

• 若是then中的回調函數返回一個值，那麼then返回的Promise將會成爲接受狀態，而且將返回的值做爲接受狀態的回調函數的參數值。
• 若是then中的回調函數拋出一個錯誤，那麼then返回的Promise將會成爲拒絕狀態，而且將拋出的錯誤做爲拒絕狀態的回調函數的參數值。
• 若是then中的回調函數返回一個已是接受狀態的Promise，那麼then返回的Promise也會成爲接受狀態，而且將那個Promise的接受狀態的回調函數的參數值做爲該被返回的Promise的接受狀態回調函數的參數值。
• 若是then中的回調函數返回一個已是拒絕狀態的Promise，那麼then返回的Promise也會成爲拒絕狀態，而且將那個Promise的拒絕狀態的回調函數的參數值做爲該被返回的Promise的拒絕狀態回調函數的參數值。
• 若是then中的回調函數返回一個未定狀態（pending）的Promise，那麼then返回Promise的狀態也是未定的，而且它的終態與那個Promise的終態相同；同時，它變爲終態時調用的回調函數參數與那個Promise變爲終態時的回調函數的參數是相同的。

④ Promise.prototype.catch()

方法返回一個Promise，而且處理拒絕的狀況。它的行爲與調用Promise.prototype.then(undefined, onRejected)相同。

p.catch(function(reason) {
    //reason rejection 的緣由。
   // rejection 拒絕
});
複製代碼

參考文章：
①github.com/kriskowal/q
②碼農之家/promise用法
③mozilla Promise