JS Promise API

1、描述

咱們知道JavaScript語言的執行環境是「單線程」，所謂單線程，就是一次只可以執行一個任務，若是有多個任務的話就要排隊，前面一個任務完成後才能夠繼續下一個任務。

這種「單線程」的好處就是實現起來比較簡單，容易操做；壞處就是容易形成阻塞，由於隊列中若是有一個任務耗時比較長，那麼後面的任務都沒法快速執行，或致使頁面卡在某個狀態上，給用戶的體驗不好。

一直以來，JavaScript處理異步都是以callback的方式，在前端開發領域callback機制幾乎深刻人心。在設計API的時候，不論是瀏覽器廠商仍是SDK開發商亦或是各類類庫的做者，基本上都已經遵循着callback的套路。若是有不少ajax請求，callback的層級關係足夠讓人頭暈，並且很大的增長了服務器的壓力。js中的Promise規範於是順勢而出。

2、組成

一、Promise有如下幾種狀態:

pending: 初始狀態, 初始狀態，未完成或拒絕。

fulfilled: 意味着操做成功完成。

rejected: 意味着操做失敗。

pending狀態的Promise對象可能被填充了（fulfilled）值，也可能被某種理由（異常信息）拒絕（reject）了。當其中任一種狀況出現時，Promise對象的then方法綁定的處理方法（handlers ）就會被調用(then方法包含兩個參數：onfulfilled和onrejected，它們都是Function類型。當值被填充時，調用then的onfulfilled方法，當Promise被拒絕時，調用then的onrejected方法， 因此在異步操做的完成和綁定處理方法之間不存在競爭)

由於Promise.prototype.then和 Promise.prototype.catch方法返回 promises對象自身， 因此它們能夠被鏈式調用.

二、API

Promise.resolve()  　　   執行成功
Promise.reject()　　　　 執行失敗
Promise.prototype.then()    遞延處理
Promise.prototype.catch()  異常

Promise.all() 全部的完成 Promise.all方法常被用於處理多個promise對象的狀態集合

使用setTimeout 模擬異步

 1 // new Promise() 須要一個函數參數
 2 var myFirstPromise = new Promise(function(resolve, reject){
 3 //當異步代碼執行成功時，咱們纔會調用resolve(...), 當異步代碼失敗時就會調用reject(...)
 4 //在本例中，咱們使用setTimeout(...)來模擬異步代碼，實際編碼時多是XHR請求或是HTML5的一些API方法.
 5 setTimeout(function(){
 6 resolve("成功!"); //代碼正常執行！
 7 }, 250);
 8 });
 9 
10 myFirstPromise.then(function(successMessage){
11 //successMessage的值是上面調用resolve(...)方法傳入的值.
12 //successMessage參數不必定非要是字符串類型，這裏只是舉個例子 Yay! 成功
13 console.log("Yay! " + successMessage); //Yay! 成功

14 });

 

Promise.prototype.then()    遞延對象的使用， 

then() 方法返回一個  Promise。它最多須要有兩個參數：Promise的成功和失敗狀況的回調函數。

注意事項：若是省略這兩個參數，或者提供非函數，那麼將建立一個沒有其餘處理程序的新Promise，只是採用 Promise 的最終狀態，then 被調用。

若是省略第一個參數或提供的不是函數，建立的新 Promise 簡單地採用 Promise 的完成狀態，then被調用（若是它變爲完成）。

若是省略第二個參數或提供的不是函數，建立的新 Promise 簡單地採用 Promise 的拒絕狀態，then被調用（若是它被拒絕）。

 1 var key=false;
 2 new Promise(function(resolve, reject){
 3     if(key){
 4         resolve(123)
 5     }else{
 6         reject(321)
 7     }
 8 }).then(function(value) {
 9   console.log(value); // key=true 123
10 }, function(reason) {
11   console.log(reason); //key=false 321
12 })

then的鏈式操做

 1 Promise.resolve("foo")
 2   // 1. 接收 "foo" 並與 "bar" 拼接，並將其結果作爲下一個reslove返回。
 3   //  then 裏面return ajax請求後的 結果
 4   .then(function(string) {
 5     return new Promise(function(resolve, reject) {
 6       setTimeout(function() {
 7         string += 'bar';
 8         resolve(string);
 9       }, 1);
10     });
11   })
12   // 2. 接收 "foobar", 放入一個異步函數中處理該字符串 
13   // 並將其打印到控制檯中, 可是不將處理後的字符串返回到下一個。
14   .then(function(string) {
15     setTimeout(function() {
16       string += 'baz';
17       console.log(string); //foobarbaz
18     }, 1)
19     return string;
20   })
21   // 3. 打印本節中代碼將如何運行的幫助消息，
22   // 字符串其實是由上一個回調函數以前的那塊異步代碼處理的。
23   .then(function(string) {
24     console.log("Last Then:  oops... didn't bother to instantiate and return " +
25                 "a promise in the prior then so the sequence may be a bit " +
26                 "surprising");
27 
28     // 注意 `string` 這時不會存在 'baz'。
29     // 由於這是發生在咱們經過setTimeout模擬的異步函數中。
30     console.log(string);  //foobar
31 });

 

Promise.prototype.catch()  異常

 new Promise(function (resolve, reject) {
 throw new Error('悲劇了，又出 bug 了');
 }).catch(function(err){
 console.log(err);
 });

 

 

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise