前言

“JS 是基于單線(xiàn)程事件循環(huán)”的概念構(gòu)建的，回調(diào)函數(shù)不會(huì)立即執(zhí)行，由事件輪詢(xún)?nèi)z測(cè)事件是否執(zhí)行完畢，當(dāng)執(zhí)行完有結(jié)果后，將結(jié)果放入回調(diào)函數(shù)的參數(shù)中，然后將回調(diào)函數(shù)添加到事件隊(duì)列中等待被執(zhí)行。

同時(shí)也講了回調(diào)函數(shù)的問(wèn)題：

一是“回調(diào)地獄”，因?yàn)楫惒交卣{(diào)函數(shù)的特點(diǎn)：回調(diào)函數(shù)是作為異步函數(shù)的參數(shù)，一層一層嵌套，當(dāng)嵌套過(guò)多，將使代碼邏輯變得混亂，也無(wú)法做好錯(cuò)誤捕捉和處理（只能在回調(diào)函數(shù)內(nèi)部 try catch）。

二是回調(diào)的執(zhí)行方式不符合自然語(yǔ)言的線(xiàn)性思維方式，不容易被理解。

三是控制反轉(zhuǎn)（控制權(quán)在其他人的代碼上），假如異步函數(shù)是別人提供的庫(kù)，我們把回調(diào)函數(shù)傳進(jìn)去，我們并不能知道異步函數(shù)在調(diào)用回調(diào)函數(shù)之外做了什么事情。

func1(() => {
func2(() => {
func3(() => {
func4(() => {
try {
...
} catch (err){
...
}
})
});
});
});

一、Promise 原理

首先，Promise 中文翻譯為“承諾”， 是 JavaScript 的一種對(duì)象，表示承諾終將返回一個(gè)結(jié)果，無(wú)論成功還是失敗。
Promise 有三個(gè)狀態(tài)：等待中（pending），完成（fullfilled），失?。╮ejected）, Promise 的設(shè)計(jì)具有原子性，狀態(tài)一旦從 pending 狀態(tài)轉(zhuǎn)換為 fullfilled 狀態(tài)或者 rejected 狀態(tài)后，將不能被改變。

var promise1 = new Promise((resolve, reject) => {
console.log("Promise 構(gòu)造器會(huì)立即執(zhí)行");
setTimeout(function (){
if(true) {
resolve("完成");
} else {
reject("失敗");
}
}, 1000);
})
promise1
.then((result) => {
// do something
console.log(result);
return 1
// return Promise.resolve(1); // 返回一個(gè)決議為成功的 promise 實(shí)例
// return Promise.reject("error"); // 返回一個(gè)決議為拒絕的 Promise 實(shí)例
})
.then((result) => {
// .then() 方法會(huì)返回一個(gè) promise, 完成調(diào)用的參數(shù)為前一個(gè) promise 的返回值或者決議值。
// do other things
console.log(result);
throw new Error("錯(cuò)誤") // 拋出錯(cuò)誤是隱式拒絕
})
.catch((error) => {
// 捕捉錯(cuò)誤
console.log(error)
})
.then(() => {
// 還能繼續(xù)執(zhí)行！
})
.finally(() => {
// always do somethings
console.log("finally!")
})

二、Promise 的優(yōu)勢(shì)

1.鏈?zhǔn)秸{(diào)用

Promise 使用 then 方法后還會(huì)返回一個(gè)新的 Promise 對(duì)象，便于我們傳遞狀態(tài)數(shù)據(jù)，同時(shí)鏈?zhǔn)綄?xiě)法接近于同步寫(xiě)法，更符合線(xiàn)性思維。

2.錯(cuò)誤捕捉

相比回調(diào)函數(shù)的錯(cuò)誤無(wú)法在外部捕捉的問(wèn)題，Promise 能夠?yàn)橐贿B串的異步調(diào)用提供錯(cuò)誤處理。

3.控制反轉(zhuǎn)再反轉(zhuǎn)

由于第三方提供的異步函數(shù)，無(wú)法保證回調(diào)函數(shù)如何被執(zhí)行，但是 Promise 的特點(diǎn)，能夠保證異步函數(shù)只能被 resolve 一次，以及始終以異步的形式執(zhí)行代碼。

4.可以利用 Promise.all 和 Promise.race 來(lái)解決 Promise 始終未決議和并行 Promise 嵌套的問(wèn)題

三、Promise 的不足

1.每個(gè) .then() 都是一個(gè)獨(dú)立的作用域

加入有很多個(gè) .then() 方法，就會(huì)創(chuàng)建很多個(gè)獨(dú)立的作用域，那么將只能通過(guò)外面包裹一層函數(shù)作用域的閉包來(lái)共享狀態(tài)數(shù)據(jù)

2.無(wú)法取消單個(gè) .then()

當(dāng) Promise 鏈中任意一個(gè) .then() 方法中有語(yǔ)句執(zhí)行錯(cuò)誤后，盡管經(jīng)過(guò) catch 方法的錯(cuò)誤處理，還是并不會(huì)中斷整個(gè) Promise 鏈的執(zhí)行。

3.無(wú)法得知進(jìn)度

由于 Promise 只能從 pending 到 fullfilled 或 rejected 狀態(tài)，無(wú)法得知 pending 階段的進(jìn)度。

四、Promise 應(yīng)用

// Promise 封裝 ajax
function fetch(method, url, data){
return new Promise((resolve, reject) => {
var xhr = new XMLHttpRequest();
var method = method || "GET";
var data = data || null;
xhr.open(method, url, true);
xhr.onreadystatechange = function() {
if(xhr.status === 200 && xhr.readyState === 4){
resolve(xhr.responseText);
} else {
reject(xhr.responseText);
}
}
xhr.send(data);
})
}
// 使用
fetch("GET", "/some/url.json", null)
.then(result => {
console.log(result);
})
// 封裝 nodejs error first 風(fēng)格回調(diào)
function readFile(url) {
return new Promise((resolve, reject) => {
fs.readFile(url,'utf8', (err, data) => {
if(err) {
reject(err);
return;
}
resolve(data)
}) 
})
}

五、總結(jié)

Promise 是 ES6 提出的簡(jiǎn)化異步流程控制新規(guī)范，強(qiáng)調(diào)異步任務(wù)的完成狀態(tài)且具有原子性，這使得我們的代碼更容易追蹤和維護(hù)。Promise 在事件輪詢(xún)中屬于異步事件隊(duì)列中的微任務(wù)，而微任務(wù)總是一次性全部執(zhí)行，而宏任務(wù)是每輪輪詢(xún)執(zhí)行一個(gè)。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論