Promise ，為什么會出現它，Promise 的出現，解決了哪些問題呢？

• 解決了回調地獄（嵌套）的問題，不會導致難以維護。
• 解決同步&異步的返回結果，并且按照順序返回

大家應該都知道，在 JavaScript 的世界里，所有代碼的執行都是單線程操作的。由于這個問題，導致 JavaScript 所有請求操作都必須異步執行。

Promise 本意是承諾，在程序中的意思就是承諾我過一段時間后給你返回一個結果。什么時候會用到（多一段時間）？那就是（異步操作），異步是指過了很長時間后才會返回結果。比如 網絡請求、讀取本地文件等～

基本用法

首先，我們去控制臺打印一下 Promise，如圖

很直觀的看出來，Promise 是一個構造函數

• Promise 對象擁有兩種實例方法（prototype）：then() 和 catch() 。
• Promise 還擁有四個靜態方法，分別是：all、race、reject、resolve。

我們粘一段代碼，小白如何調用 Promise

// 引入 Promise 模塊 let Promise = require('promise') let p = new Promise(function(resolve, reject){// 如果同時調用成功和失敗的方法，那么執行順序就是：誰在前，就調誰。reject(100);resolve(1); }) // then 接受兩個回調函數，一個是成功的回調，一個是失敗的回調 p.then(function(data){console.log('data', data) },function(err){console.log('err', err) }) // 控制臺打印的結果為：data 100 復制代碼

接下來我們來看看 Promise 有哪些 API

then() 方法

從例子中可以看出 then 方法可以接收兩個參數，且通常都是函數。第一個參數是成功的回調，第二個參數是失敗的回調。這兩個參數都會將回調存放在對應的數組內，當 promise 狀態改變之后，調用成功或者失敗的數組即可

• then 方法可以鏈式調用，與 jquery 不同，jquery 的鏈式調用靠的是返回的 this，可惜的是， promise 不能返回 this，promise 實現鏈式調用靠的是返回一個新的 Promise

let p = new Promise(function(resolve, reject){resolve() }) // p2 和 p 不是一個東西，如果是，就會走成功了。就不會走失敗了 let p2 = p.then(function(){throw new Error('錯誤') }) p2.then(function(data){console.log(data) },function(err){console.log(err) }) // 控制臺打印結果：Error: 錯誤 復制代碼

• promise 實例可以多次 then，當成功后，會將 then 中的成功方法按順序執行

let p = new Promise(function(resolve, reject){// 定時器來異步回調setTimeout(function(){resolve(1000)}, 1000) }) p.then(function(data){console.log('data', data) },function(err){console.log('err', err) }) p.then(function(data){console.log('data', data) },function(err){console.log('err', err) }) // 打印結果： data 1000 data 1000 復制代碼

catch() 方法

它有兩個作用：

• 可以和 then 的第二個參數一樣，用來指定 reject 的回調
• 執行 then 第一個回調參數時，如果拋出異常，會直接走 catch 方法

let p = new Promise(function(resolve, reject){reject(new Error('error')) }) // then 沒有寫第二個 reject 回調 p.then(function(data){console.log(data) }).catch(function(reasone){console.log(reasone) }) // 打印結果： Error: error 復制代碼

resolve() & reject() 方法

• Promise.resolve() 相當于創建了一個立即 resolve 對象，使得 promise 對象直接 resolve。

Promise.resolve(5).then(function(data){console.log(data) }) // 打印結果：5 復制代碼

• Promise.reject() 相當于創建了一個立即 reject 對象，使得 promise 對象直接 reject，并把 error 傳到 catch 函數中

Promise.reject(new Error('error')).catch(function(err){console.log(err) }) // 打印結果：Error: error 復制代碼

all() 方法

• Promise.all() 接收的參數是 promise 對象組成的數組，并返回新的 promise 對象。

Promise.all([Promise.resolve(100),Promise.resolve(200)]).then(function(data){console.log('成功：',data) },function(err){console.log(err) }) // 打印結果：成功： [ 100, 200 ] 復制代碼

• 當數組中有一個 reject 時，會改變狀態，并執行錯誤狀態

Promise.all([Promise.resolve(100),Promise.reject(new Error('error'))]).then(function(data){console.log('成功：',data) },function(err){console.log(err) }) // 打印結果：Error: error 復制代碼

race() 方法

• Promise.race() 同樣接收的參數是 promise 對象組成的數組，并返回新的 promise 對象。與 Promise.all() 不同的是只要第一個數組成功了。就算成功。如果第一個失敗了。就算失敗

// 成功的狀態，第一個數組對象，成功了就不會執行下一個數組對象 Promise.race([Promise.resolve(100),Promise.reject(new Error('error'))]).then(function(data){console.log('成功：',data) },function(err){console.log(err) })// 失敗的狀態，第一個數組對象失敗，就會報錯，后面也不執行 Promise.race([Promise.reject(new Error('error')),Promise.resolve(100),Promise.reject(new Error('error'))]).then(function(data){console.log('成功：',data) },function(err){console.log(err) }) 復制代碼

友情鏈接

• Promise 源碼實現：www.jianshu.com/p/7754f0182…
• Promise 對象：es6.ruanyifeng.com/#docs/promi…

總結

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

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