前言：

做過(guò)前端開(kāi)發(fā)的都知道，JavaScript是單線程語(yǔ)言，瀏覽器只分配給JS一個(gè)主線程，用來(lái)執(zhí)行任務(wù)，但是每次一次只能執(zhí)行一個(gè)任務(wù)，這些任務(wù)形成一個(gè)任務(wù)隊(duì)列排隊(duì)等候執(zhí)行；但是某些任務(wù)是比較耗時(shí)的，如網(wǎng)絡(luò)請(qǐng)求，事件的監(jiān)聽(tīng)，以及定時(shí)器，如果讓這些非常耗時(shí)的任務(wù)一一排隊(duì)等候執(zhí)行，那么程序執(zhí)行效率會(huì)非常的低，甚至?xí)?dǎo)致頁(yè)面假死。因此，瀏覽器為這些耗時(shí)的任務(wù)開(kāi)辟了新的線程，主要包括http請(qǐng)求線程、瀏覽器事件觸發(fā)線程、瀏覽器定時(shí)觸發(fā)器，但是這些任務(wù)都是異步的，這就涉及到了前端開(kāi)發(fā)的異步回調(diào)操作處理，前端處理異步回調(diào)操作用到的就是Async/Await和Promise。

而且在前端相關(guān)的面試的時(shí)候，面試官一般都會(huì)問(wèn)到關(guān)于Promise相關(guān)的使用問(wèn)題，甚至在筆試中也會(huì)出一些關(guān)于Promise和setTimeout的執(zhí)行結(jié)果，這說(shuō)明Promise的使用對(duì)于前端開(kāi)發(fā)來(lái)說(shuō)是非常重要的一個(gè)知識(shí)點(diǎn)。那么本篇博文就來(lái)分享一下關(guān)于Promise的使用相關(guān)的知識(shí)點(diǎn)。

一、首先，要知道為什么要用Promise語(yǔ)法？

在介紹Promise之前，首先來(lái)了解一下JavaScript的特性。搞前端開(kāi)發(fā)的都知道JS是一個(gè)傳統(tǒng)的單線程編程，它里面的程序運(yùn)行都是同步的，只有一個(gè)主線程，但是隨著技術(shù)的發(fā)展，為了解決前期的缺陷，引入了異步思想，也就是一個(gè)異步過(guò)程的執(zhí)行將不再與原有的序列有順序關(guān)系，這就解決了同步執(zhí)行引起的執(zhí)行效率不高的缺陷。用一句話解釋?zhuān)寒惒骄褪菑闹骶€程發(fā)射一個(gè)子線程來(lái)完成任務(wù)。

再來(lái)了解一下Promise，Promise是ES6新增加的，它是一個(gè)由ES6提供的類(lèi)，其主要目的就是很好的處理復(fù)雜的異步任務(wù)，但是它不是任何瀏覽器都能支持，比如一些舊版本的瀏覽器就不支持，只有蘋(píng)果的Safari10和Windows的Edge14版本以上瀏覽器才開(kāi)始支持ES6特性的。

Promise作為替代回調(diào)函數(shù)執(zhí)行，作為異步操作的處理方法；是JS異步執(zhí)行時(shí)候，回調(diào)函數(shù)嵌套回調(diào)函數(shù)的這一問(wèn)題的解決方法，Promise更簡(jiǎn)潔地控制函數(shù)執(zhí)行流程。Promise對(duì)象其實(shí)表示是一個(gè)異步操作的最終成敗，以及結(jié)果值，也就是一個(gè)代理值，是ES6中的一種異步回調(diào)解決方案。

Promise對(duì)象代理的值其實(shí)是未知的，狀態(tài)是動(dòng)態(tài)可變的，因此Promise對(duì)象的狀態(tài)有三種：進(jìn)行中、結(jié)束、失敗，它運(yùn)行的時(shí)候，只能從進(jìn)行中到失敗，或者是從進(jìn)行中到成功。使用Promise對(duì)象只要是通過(guò)同步的表達(dá)形式來(lái)運(yùn)行異步代碼。

• ①pending：初始狀態(tài)，既不成功，也不失?。?/li>
• ②fulfilled：操作成功結(jié)束；
• ③rejected：操作失敗。

怎么構(gòu)造Promise？這里簡(jiǎn)單舉一個(gè)構(gòu)造Promise的示例：

new Promise(function (resolve, reject) {

? ?// 要做的事情...

});

通過(guò)上面新構(gòu)造一個(gè)Promise 對(duì)象好像并沒(méi)有看出它是怎樣很好的處理復(fù)雜的異步任務(wù)的，那么接下來(lái)就是Promise的核心操作。

二、接著，來(lái)了解一下回調(diào)地獄(Callback Hell)

回調(diào)地獄也叫回調(diào)嵌套或者函數(shù)混亂的調(diào)用，通俗點(diǎn)講就是：需要發(fā)送三個(gè)網(wǎng)絡(luò)請(qǐng)求，第三個(gè)請(qǐng)求依賴第二個(gè)請(qǐng)求的結(jié)果，第二個(gè)請(qǐng)求依賴第一個(gè)請(qǐng)求的結(jié)果。不斷增加的嵌套使用。

回調(diào)函數(shù)的弊?。?/strong>

setTimeout(() => {
console.log(1)
setTimeout(() => {
console.log(2)
setTimeout(() => {
console.log(3)
},3000)
},2000)
},1000)

const delay = (millisecond) => {
return new Promise((resolve, reject)=>{
if (typeof millisecond != 'number') reject(new Error(‘必須是number類(lèi)型'));
setTimeout(()=> {
resolve(`延遲${millisecond}毫秒后輸出`)
}, millisecond)
})
}

let obj =new Promise((resolve,reject)=>{
resolve(‘yes');
});

//1.若傳入的是非Promise，基本數(shù)據(jù)類(lèi)型的數(shù)據(jù)，則返回成功的Promise。

let p1= Promise.resolve('123')

//2.若傳入的是Promise，則該對(duì)象的結(jié)果就決定了resolve的返回結(jié)果值。

let p2 = Promise.resolve(obj);

//3.嵌套使用

let p3 = Promise.resolve(Promise.resolve(Promise.resolve('abc')));
console.log(p3);

let p = Promise.reject(123123);
let p2 = Promise.reject('abc');
let p3 = Promise.reject(Promise.resolve('ok'));
console.log(p3);

let p=new Promise((resolve,reject)=>{
resolve(‘yes')
})

p.then(value=>{
console.log(value) //這里的value就是上面的yes
},reason=>{
console.error(reason)
})

let p =new Promise((resolve,reject)=>{
reject('失?。?)；
})

p.then(value=>{},reason=>{
console.error(reason);
})

p.catch(reason=>{
console.error(reason)
})

request.finally(function(){
// 最后，而且一定會(huì)執(zhí)行的代碼
})

let p1 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve(‘yes');
}, 1000);
});

let p2 = Promise.resolve('ok');
let p3 = Promise.reject('Oh no');

//所有的
let result = Promise.all([p1, p2, p3]);
console.log(result);

let p1 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve(‘yes');
}, 1000);
});

let p2 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('ok');
}, 500);
});

let result = Promise.race([p1, p2]);
console.log(result); //p2 ok