一、概述

Promise是異步編程的一種解決方案，可以替代傳統(tǒng)的解決方案--回調(diào)函數(shù)和事件。

ES6統(tǒng)一了用法，并原生提供了Promise對(duì)象。

作為對(duì)象，Promise有以下兩個(gè)特點(diǎn)：

• (1)對(duì)象的狀態(tài)不受外界影響。
• (2)一旦狀態(tài)改變了就不會(huì)再變，也就是說任何時(shí)候Promise都只有一種狀態(tài)。

二、Promise的狀態(tài)

Promise有三種狀態(tài)，分別是 Pending (進(jìn)行中)、Resolved (已完成)、Rejected (已失敗)。

Promise從Pending狀態(tài)開始，如果成功就轉(zhuǎn)到成功態(tài)，并執(zhí)行resolve回調(diào)函數(shù)；如果失敗就轉(zhuǎn)到失敗狀態(tài)并執(zhí)行reject回調(diào)函數(shù)。

三、基本用法

可以通過Promise的構(gòu)造函數(shù)創(chuàng)建Promise對(duì)象

var promise = new Promise((resolve,reject) => {
? setTimeout(()=>{
? ? console.log("hello world")
}, 2000)
})

Promise構(gòu)造函數(shù)接受一個(gè)函數(shù)作為參數(shù)，該函數(shù)的兩個(gè)參數(shù)是 resolve ，reject，它們由JavaScript引擎提供。

其中 resolve 函數(shù)的作用是當(dāng)Promise對(duì)象轉(zhuǎn)移到成功，調(diào)用resolve并將操作結(jié)果作為其參數(shù)傳遞出去；reject 函數(shù)的作用是當(dāng)Promise對(duì)象的狀態(tài)變?yōu)槭r(shí)，將操作報(bào)出的錯(cuò)誤作為參數(shù)傳遞出去。

如下代碼：

function greet(){
? var promise = new Promise(function(resolve,reject){
? ? var greet = "hello world"
? ? resolve(greet)
})
? return promise
}
greet().then(v=>{
? console.log(v)//*
})

上面的 * 行的輸出就是greet的值，也就是 resolve() 傳遞出來的參數(shù)。

注意：創(chuàng)建一個(gè)Promise對(duì)象會(huì)立即執(zhí)行里面的代碼，所以為了更好的控制代碼的運(yùn)行時(shí)刻，可以將其包含在一個(gè)函數(shù)中，并將這個(gè)Promise作為函數(shù)的返回值。

四、Promise的then方法

promise的then方法帶有一下三個(gè)參數(shù)：成功的回調(diào)，失敗的回調(diào)，前進(jìn)的回調(diào)。

一般情況下只需要實(shí)現(xiàn)第一個(gè)，后面的是可選的。

Promise中最為重要的狀態(tài)，通過then的狀態(tài)傳遞可以實(shí)現(xiàn)的回調(diào)函數(shù)鏈?zhǔn)讲僮鞯膶?shí)現(xiàn)。

先執(zhí)行以下代碼：

function greet () {
? var promise = new Promise (function(resolve, reject){
? ? var greet = "hello world"
? ? resolve(greet)
? })
? return promise
}
var p = greet().then(v => {
? console.log(v) ?// Promise { <pending> }
})
console.log(p) ?// hello world

從中可以看出promise執(zhí)行then還是一個(gè)promise，并且Promise的執(zhí)行是異步的。

因?yàn)?hello world 在最后一條輸出語(yǔ)句的前面就打印出來了，且Promise的狀態(tài)為pending(進(jìn)行中)。

因?yàn)镻romise執(zhí)行then后還是Promise，所以就可以根據(jù)這一特性，不斷的鏈?zhǔn)秸{(diào)用回調(diào)函數(shù)。

下面是一個(gè)例子：

function greet () {
? var promise = new Promise(function (resolve, reject){
? ? var greeet = "hello world"
? ? resolve(greet)
? })
? return promise
}
greet().then(v => {
? console.log(v+1)
? return v
})
.then (v => {
? console.log(v+2)
? return v
})
.then (v => {
? console.log(v+3)
})

五、Promise的其他方法

reject用法

reject的作用就是把Promise的狀態(tài)從pending置為rejected，這樣在then中就能捕捉到reject的回調(diào)函數(shù)

function judgeNumber (num) {
? var promise = new Promise (function(resolve, reject) {
? ? num = 5
? ? if(num < 5){
? ? ? resolve("num小于5，值為" + num)
? ? } else {
? ? ? reject("num不小于5，值為" + num)
? ? }
? })
? return promise
}
?
judgeNumber().then(
? function (message) {
? ? console.log(message)
? },
? funtion (message) {
? ? console.log(message)
? }
)

.then 后包含有兩個(gè)方法，前一個(gè)執(zhí)行resolve回調(diào)的參數(shù)，后一個(gè)執(zhí)行reject回調(diào)的參數(shù)

catch用法

function judgeNumber(num){
? ? var promise1 = new Promise(function(resolve,reject){
? ? ? ? num =5;
? ? ? ? if(num<5){
? ? ? ? ? ? resolve("num小于5，值為："+num);
? ? ? ? }else{
? ? ? ? ? ? reject("num不小于5，值為："+num);
? ? ? ? }
? ? });
? ? return promise1;
}
?
judgeNumber().then(
? ? function(message){
? ? ? ? console.log(message);
? ? }
)
.catch(function(message){
? ? console.log(message);
})

這個(gè)時(shí)候catch執(zhí)行的是和reject一樣的，也就是說如果Promise的狀態(tài)變?yōu)閞eject時(shí)，會(huì)被catch捕捉到，不過需要特別注意的是如果前面設(shè)置了reject方法的回調(diào)函數(shù)，則catch不會(huì)捕捉到狀態(tài)變?yōu)閞eject的情況。

catch還有一點(diǎn)不同的是，如果在resolve或者reject發(fā)生錯(cuò)誤的時(shí)候，會(huì)被catch捕捉到，這與java，c++的錯(cuò)誤處理時(shí)一樣的，這樣就能避免程序卡死在回調(diào)函數(shù)中了。

all用法

Promise的all方法提供了并行執(zhí)行異步操作的能力，在all中所有異步操作結(jié)束后才執(zhí)行回調(diào)。

function p1(){
? ? var promise1 = new Promise(function(resolve,reject){
? ? ? ? console.log("p1的第一條輸出語(yǔ)句");
? ? ? ? console.log("p1的第二條輸出語(yǔ)句");
? ? ? ? resolve("p1完成");
? ? })
? ? return promise1;
}
?
function p2(){
? ? var promise2 = new Promise(function(resolve,reject){
? ? ? ? console.log("p2的第一條輸出語(yǔ)句");
? ? ? ? setTimeout(()=>{console.log("p2的第二條輸出語(yǔ)句");resolve("p2完成")},2000);
?
? ? })
? ? return promise2;
}
?
function p3(){
? ? var promise3 = new Promise(function(resolve,reject){
? ? ? ? console.log("p3的第一條輸出語(yǔ)句");
? ? ? ? console.log("p3的第二條輸出語(yǔ)句");
? ? ? ? resolve("p3完成")
? ? });
? ? return ?promise3;
}
?
Promise.all([p1(),p2(),p3()]).then(function(data){
? ? console.log(data);
})

race用法

在all中的回調(diào)函數(shù)中，等到所有的Promise都執(zhí)行完，再來執(zhí)行回調(diào)函數(shù)，race則不同它等到第一個(gè)Promise改變狀態(tài)就開始執(zhí)行回調(diào)函數(shù)。

將上面的`all`改為`race`,得到

Promise.race([p1(),p2(),p3()]).then(function(data){
? ? console.log(data);
})

這里還需要注意一個(gè)問題，promise的執(zhí)行時(shí)異步的，比如下面這樣：

var i
?
var promise = new Promise(function(resolve,reject){
? ? resolve("hello");
})
?
promise.then(data=>{
? ? i = 2;
?
})
console.log(i);? ? ? ?

得到的結(jié)果是undefined,這不是因?yàn)閜romise不能改變外部的值，而是因?yàn)楫?dāng)執(zhí)行console.log(i)時(shí)，then()方法還沒執(zhí)行完。

如果你將console.log(i)延遲輸出就可以得到正確的結(jié)果：

setTimeout(()=>console.log(i),1000);

所以不要在promise后面執(zhí)行一些依賴promise改變的代碼，因?yàn)榭赡躳romise中的代碼并未執(zhí)行完，或者你可以將其延遲輸出。

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評(píng)論