填坑十萬個為什麼?(18)

NO IMAGE

簡介:很多概念不清或忘記,重新構建自己的知識體系。每天問自己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 函數, resolvereject 兩個函數作為參數傳遞給executor(executor函數在Promise構造函數返回新建對象前被調用)。
  • resolvereject 函數被調用時,分別將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

相關文章

填坑十萬個為什麼?(22)

填坑十萬個為什麼?(21)

填坑十萬個為什麼?(20)

填坑十萬個為什麼?(19)