Promise ，為什么會(huì)出現(xiàn)它，Promise 的出現(xiàn)，解決了哪些問題呢？

• 解決了回調(diào)地獄（嵌套）的問題，不會(huì)導(dǎo)致難以維護(hù)。
• 解決同步&異步的返回結(jié)果，并且按照順序返回

大家應(yīng)該都知道，在 JavaScript 的世界里，所有代碼的執(zhí)行都是單線程操作的。由于這個(gè)問題，導(dǎo)致 JavaScript 所有請(qǐng)求操作都必須異步執(zhí)行。

Promise 本意是承諾，在程序中的意思就是承諾我過一段時(shí)間后給你返回一個(gè)結(jié)果。什么時(shí)候會(huì)用到（多一段時(shí)間）？那就是（異步操作），異步是指過了很長時(shí)間后才會(huì)返回結(jié)果。比如 網(wǎng)絡(luò)請(qǐng)求、讀取本地文件等～

基本用法

首先，我們?nèi)タ刂婆_(tái)打印一下 Promise，如圖

很直觀的看出來，Promise 是一個(gè)構(gòu)造函數(shù)

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

我們粘一段代碼，小白如何調(diào)用 Promise

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

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

then() 方法

從例子中可以看出 then 方法可以接收兩個(gè)參數(shù)，且通常都是函數(shù)。第一個(gè)參數(shù)是成功的回調(diào)，第二個(gè)參數(shù)是失敗的回調(diào)。這兩個(gè)參數(shù)都會(huì)將回調(diào)存放在對(duì)應(yīng)的數(shù)組內(nèi)，當(dāng) promise 狀態(tài)改變之后，調(diào)用成功或者失敗的數(shù)組即可

• then 方法可以鏈?zhǔn)秸{(diào)用，與 jquery 不同，jquery 的鏈?zhǔn)秸{(diào)用靠的是返回的 this，可惜的是， promise 不能返回 this，promise 實(shí)現(xiàn)鏈?zhǔn)秸{(diào)用靠的是返回一個(gè)新的 Promise

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

• promise 實(shí)例可以多次 then，當(dāng)成功后，會(huì)將 then 中的成功方法按順序執(zhí)行

let p = new Promise(function(resolve, reject){// 定時(shí)器來異步回調(diào)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) }) // 打印結(jié)果： data 1000 data 1000 復(fù)制代碼

catch() 方法

它有兩個(gè)作用：

• 可以和 then 的第二個(gè)參數(shù)一樣，用來指定 reject 的回調(diào)
• 執(zhí)行 then 第一個(gè)回調(diào)參數(shù)時(shí)，如果拋出異常，會(huì)直接走 catch 方法

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

resolve() & reject() 方法

• Promise.resolve() 相當(dāng)于創(chuàng)建了一個(gè)立即 resolve 對(duì)象，使得 promise 對(duì)象直接 resolve。

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

• Promise.reject() 相當(dāng)于創(chuàng)建了一個(gè)立即 reject 對(duì)象，使得 promise 對(duì)象直接 reject，并把 error 傳到 catch 函數(shù)中

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

all() 方法

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

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

• 當(dāng)數(shù)組中有一個(gè) reject 時(shí)，會(huì)改變狀態(tài)，并執(zhí)行錯(cuò)誤狀態(tài)

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

race() 方法

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

// 成功的狀態(tài)，第一個(gè)數(shù)組對(duì)象，成功了就不會(huì)執(zhí)行下一個(gè)數(shù)組對(duì)象 Promise.race([Promise.resolve(100),Promise.reject(new Error('error'))]).then(function(data){console.log('成功：',data) },function(err){console.log(err) })// 失敗的狀態(tài)，第一個(gè)數(shù)組對(duì)象失敗，就會(huì)報(bào)錯(cuò)，后面也不執(zhí)行 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) }) 復(fù)制代碼

友情鏈接

• Promise 源碼實(shí)現(xiàn)：www.jianshu.com/p/7754f0182…
• Promise 對(duì)象：es6.ruanyifeng.com/#docs/promi…

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。