1.概述

在Promise之前，我們js解決異步的方式是采用回調函數的方式，但是這種方式有個問題，就是當業務比較復雜時，很容易出現回調地獄，使得代碼很難理解和維護。所以，Promise就是解決回調地獄的問題而出現的異步編程的解決方案。

2.詳述Promise

我們先通過一個簡單的例子，來感受一下Promise。 let p = new Promise(function(resolve,reject){if(異步操作成功){resolve();}else{reject();}}); 復制代碼通過上面的簡短的例子中，只需要注意三個地方：Promise(),resolve(),reject()

2.1 Promise()

Promise()構造函數在new的時候，會傳遞一個函數作為參數，那么這個函數在新建一個Promise后，就會立即執行。 let p = new Promise(function(resolve,reject){console.log(1); }); console.log(2); 復制代碼1 2

2.2 Promise的三種狀態

Promise對象有三種狀態：pending(進行中)，resolved(已完成)，rejected(已失敗)。 一旦狀態由pending變成了resolved了，狀態就凝固了，不會再改變了，會一直保持這個狀態。一旦狀態由pending變成了rejected了，狀態就凝固了，也不會再改變了。 在聲明一個Promise對象實例時，我們傳入的函數參數中，resolve對應著完成態之后的操作，reject對應著失敗態之后的操作。

2.3 then()方法

then()方法是Promise實例上的方法，then()方法是異步的方法，需要自己調用，調用時傳遞兩個參數：第一個參數(函數)對應著完成態的操作，也就是resolve。第二個參數(函數)對應著失敗態的操作，也就是reject。 也就是說，在Promise中是通過then()方法來指定處理異步操作結果的方法。 then()方法的返回值是什么吶？then方法會返回一個新的Promise實例，這樣的設計好處是可以使用鏈式寫法，還有一點是鏈式寫法中的then方法(第二個開始)，它們的resolve中的參數是什么吶？就是前一個then()中的resolve的return返回值。 let p1 = new Promise(function(resolve,reject){setTimeout(()=>{resolve('p1');},10); }); p1.then(data=>{console.log(data); //p1return 'then1'; }).then(data=>{console.log(data); //then1return 'then2'; }).then(data=>{console.log(data); //then2 }); 復制代碼

2.4 示例

function loadImage(url){return new Promise(function(resolve,reject){let img = new Image();img.src = url;img.onload = function(){resolve();}img.onerror = function(){reject();}}); }let img1 = loadImage("http://storage.xuetangx.com/public_assets/xuetangx/yifang/banner03.jpg"); img1.then(function(data){console.log("success"); },function(err){console.log("error"); }); 復制代碼

3.Promise進階

reject函數的參數一般是一個Error對象的實例，而resolve函數的參數除了是正常return返回的值之外，還有可能是一個Promise實例。 let p1 = new Promise(function(resolve,reject){setTimeout(()=>{resolve('hello');},3000); }); let p2 = new Promise(function(resolve,reject){setTimeout(()=>{resolve(p1);},10); }); p2.then((data)=>{console.log(data); }); 復制代碼p2會等待p1的執行結果，然后再執行，輸出的結果是hello，從輸出的結果可知，p1完成狀態轉變之后，傳遞給resolve(或者reject)的結果會傳遞給p2中的resolve。

4.catch()錯誤處理

catch()方法是Promise原型上的方法，用于指定發生錯誤時的回調。 let p = new Promise(function(resolve,reject){setTimeout(()=>{resolve('p1');},0); }); p.then((data)=>{console.log(data);throw new Error('then1');return 'then1'; }).then((data)=>{console.log(data);throw new Error('then2');return 'then2'; }).catch(err=>{ //在此處可以捕獲前面的錯誤console.log(err); }); 復制代碼執行結果是： p1 then1 可以看出，在第一個then中拋出了一個錯誤，在最后一個Promise對象中可以catch到這個錯誤，所以，一般我們就不用在then方法中指定reject狀態的回調函數了，而是指定catch方法即可。

5.all()方法

Promise的all方法，提供了并行執行異步操作的能力，并且在所有異步操作執行完后才執行回調。 // task1 function task1(){console.log("task1");let p = new Promise(function(resolve,reject){setTimeout(function(){console.log('set-01');resolve('then1');},1000);});return p; } // task2 function task2(){console.log('task2');let p = new Promise(function(resolve,reject){setTimeout(function(){console.log('set-02');resolve('then2');},1000);});return p; } Promise.all([task1(),task2()]).then((data)=>{console.log('done');console.log(data); }); 復制代碼運行結果是： task1
task2
set-01
set-02
done
['then1','then2']

6. race()方法

race()從字面意思就知道是賽跑的意思，其用法和all()方法相同，但是二者的區別是all()方法是全部的異步操作都執行完畢后，才執行then回調；而race()方法是只要有一個異步操作執行完畢后，就立即執行then回調，需要注意的是，其它沒有執行完畢的異步操作仍然會繼續執行，而不是停止了。

總結

以上是生活随笔為你收集整理的娓娓道来Promise的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。