ECMAScript6中的Promise是什么？如何使用？這些問題可能是我們?nèi)粘９ぷ鲿姷降?。通過這些問題，希望你能收獲更多。下面是揭開這些問題的詳細(xì)內(nèi)容。

創(chuàng)新互聯(lián)是一家集網(wǎng)站建設(shè),忻府企業(yè)網(wǎng)站建設(shè),忻府品牌網(wǎng)站建設(shè),網(wǎng)站定制,忻府網(wǎng)站建設(shè)報價,網(wǎng)絡(luò)營銷,網(wǎng)絡(luò)優(yōu)化,忻府網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競爭力?？沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時我們時刻保持專業(yè)、時尚、前沿，時刻以成就客戶成長自我，堅持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。

Promise是什么

Promise是構(gòu)造函數(shù)，可以通過new來生成Promise對象。

Promise有什么用

目前我的感受是：更加方便來操作異步流程，更加明確直觀的控制事件的流程以及可以鏈?zhǔn)秸{(diào)用

Promise特點(diǎn)

Promise對象有以下兩個特點(diǎn)。

（1）對象的狀態(tài)不受外界影響。Promise對象代表一個異步操作，有三種狀態(tài)：pending（進(jìn)行中）、fulfilled（已成功）和rejected（已失?。?。只有異步操作的結(jié)果，可以決定當(dāng)前是哪一種狀態(tài)，任何其他操作都無法改變這個狀態(tài)。這也是Promise這個名字的由來，它的英語意思就是“承諾”，表示其他手段無法改變。
（2）一旦狀態(tài)改變，就不會再變，任何時候都可以得到這個結(jié)果。Promise對象的狀態(tài)改變，只有兩種可能：從pending變?yōu)閒ulfilled和從pending變?yōu)閞ejected。只要這兩種情況發(fā)生，狀態(tài)就凝固了，不會再變了，會一直保持這個結(jié)果，這時就稱為 resolved（已定型）。如果改變已經(jīng)發(fā)生了，你再對Promise對象添加回調(diào)函數(shù)，也會立即得到這個結(jié)果。這與事件（Event）完全不同，事件的特點(diǎn)是，如果你錯過了它，再去監(jiān)聽，是得不到結(jié)果的。

通過幾個簡單例子理解它

通過new構(gòu)造一個簡單的Promise對象

let p = new Promise((resolve, reject) => {});

傳入的兩個參數(shù)是用來控制Promise對象的狀態(tài)，我們打印一下p看一下它的狀態(tài)：
Promise {__proto__: Promise[[PromiseStatus]]: "pending"[[PromiseValue]]: undefined這個就是初始狀態(tài)pending
而resolve，reject可以控制Promise的狀態(tài)

//resolve()
let p = new Promise((resolve, reject) => resolve("123")); //Promise {: "123"}

//reject()
let p = new Promise((resolve, reject) => reject("123")); //reject()后是返回一個失敗狀態(tài)的Promise，不需要用catch來捕獲不寫catch會報錯
p.catch(data => console.log(data));    
console.log(p);    //Promise {: "123"}   123

提到了catch那就有還有一個then
 說一直白點(diǎn)：then(f1, f2)可以填入兩個函數(shù)參數(shù)，一個參數(shù)就是將resolve中參數(shù)代入f1來執(zhí)行,第二個參數(shù)將reject中參數(shù)代入f2來執(zhí)行;第二個參數(shù)可以用catch來代替，并且它更加強(qiáng)大，catch能捕獲then()中的報錯

let p = new Promise((resolve, reject) => {
    
    let n = Math.ceil(Math.random() * 10);
    n > 5 ? resolve(n) : reject(n);
});
p.then(
    data => console.log(data),
    data => console.log(data),
)

用catch代替，并捕獲then的錯誤

let p = new Promise((resolve, reject) => {
    
    resolve("yes")
});
p.then(
    data => {console.log(data),console.log(a)}

).catch(data => console.log(data));
//yes
//ReferenceError: a is not defined

因為then處理后返回的還是Promise對象，這樣方便鏈?zhǔn)秸{(diào)用，then中都沒有return，怎么會有Promise對象的呢？

then或catch即使未顯式指定返回值, 它們也總是自動包裝一個新的fulfilled狀態(tài)的promise對象。

我們打印一下會發(fā)現(xiàn)：Promise {: undefined}
  那么我們可以顯示的return一個Promise對象看看，

let p = new Promise((resolve, reject) => resolve("yes"));
p.then(data => Promise.resolve("第二個Promise")).then(data => console.log(data));   //第二個Promise

可以看到p.then(data => Promise.resolve("第二個Promise"))返回Promise對象是Promise {: "第二個Promise"}并且將value值作為參數(shù)傳入到第二個then中來執(zhí)行

Promise.resolve(value | promise | thenable)創(chuàng)建Promise對象
  第一參數(shù)空或者原始值，創(chuàng)建后的Promise對象狀態(tài)直接為resolved狀態(tài)

Promise.resolve('f')
// 等價于
new Promise(resolve => resolve('f'))

第二值得注意的是具有then方法的對象

let thenable = {
    then :(resolve, reject) => resolve("thenable")
}

let p = Promise.resolve(thenable);
console.log(p);

Promise對象狀態(tài)由->
  第三參數(shù)為實(shí)例化的Promise對象，

let p1 = new Promise((resolve, reject) => false);
let p = Promise.resolve(p1);
console.log(p);

p狀態(tài)和p1狀態(tài)一致的

Promise.reject(value)創(chuàng)建Promise對象
  與resolve不同的是：直接將value原樣作為參數(shù)傳入

const thenable = {
  then(resolve, reject) {
    reject('出錯了');
  }
};

Promise.reject(thenable)
.catch(e => {
  console.log(e === thenable)
})

catch方法的參數(shù)不是reject拋出的“出錯了”這個字符串，而是thenable對象。

Promise.all

將多個 Promise 實(shí)例，包裝成一個新的 Promise 實(shí)例;const p = Promise.all([p1, p2, p3]);

（1）只有p1、p2、p3的狀態(tài)都變成fulfilled，p的狀態(tài)才會變成fulfilled，此時p1、p2、p3的返回值組成一個數(shù)組，傳遞給p的回調(diào)函數(shù)。

（2）只要p1、p2、p3之中有一個被rejected，p的狀態(tài)就變成rejected，此時第一個被reject的實(shí)例的返回值，會傳遞給p的回調(diào)函數(shù)。

會等all中的對象全部執(zhí)行完后將數(shù)組傳入回調(diào)函數(shù)then中

let p = new Promise((resolve, reject) => setTimeout(() => resolve('p'),1000));
let p1 = new Promise((resolve, reject) => setTimeout(() => resolve('p2'),2000));
let p2 = new Promise((resolve, reject) => setTimeout(() => resolve('p3'),3000));
Promise.all([p, p1, p2]).then(data => console.log(data)).catch(data => console.log(data));    // ["p", "p2", "p2"]

let p = new Promise((resolve, reject) => resolve('p'));
let p1 = new Promise((resolve, reject) => reject('p2'));
let p2 = new Promise((resolve, reject) => resolve('p2'));
Promise.all([p, p1, p2]).then(data => console.log(data)).catch(data => console.log(data));   //p2

Promise.race
與all不同的是：只要p1、p2、p3之中有一個實(shí)例率先改變狀態(tài)，p的狀態(tài)就跟著改變。那個率先改變的 Promise 實(shí)例的返回值，就傳遞給p的回調(diào)函數(shù)。

let p = new Promise((resolve, reject) => setTimeout(() => resolve('p'),1000));
let p1 = new Promise((resolve, reject) => setTimeout(() => resolve('p2'),2000));
let p2 = new Promise((resolve, reject) => setTimeout(() => resolve('p3'),3000));
Promise.race([p, p1, p2]).then(data => console.log(data)).catch(data => console.log(data));   //p

Promise對象的回調(diào)函數(shù)與setTimeout的順序問題

An event loop has one or more task queues. A task queue is an ordered list of tasks, which are algorithms that are responsible for such work as: events, parsing, callbacks, using a resource, reacting to DOM manipulation…Each event loop has a microtask queue. A microtask is a task that is originally to be queued on the microtask queue rather than a task queue.
  瀏覽器(或宿主環(huán)境) 遵循隊列先進(jìn)先出原則, 依次遍歷macrotask queue中的每一個task, 不過每執(zhí)行一個macrotask, 并不是立即就執(zhí)行下一個, 而是執(zhí)行一遍microtask queue中的任務(wù), 然后切換GUI線程重新渲染或垃圾回收等.
  Event Loop (事件循環(huán))擁有如下兩種隊列
  macrotask queue, 指的是宏任務(wù)隊列, 包括rendering, script(頁面腳本), 鼠標(biāo), 鍵盤, 網(wǎng)絡(luò)請求等事件觸發(fā), setTimeout, setInterval, setImmediate(node)等等.
  microtask queue, 指的是微任務(wù)隊列, 用于在瀏覽器重新渲染前執(zhí)行, 包含Promise, process.nextTick(node), Object.observe, MutationObserver回調(diào)等.
  process.nextTick > promise.then > setTimeout ? setImmediate

setTimeout(function () {
  console.log('three');
}, 0);

Promise.resolve().then(function () {
  console.log('two');
});

console.log('one');

// one
// two
// three

上面代碼中，setTimeout(fn, 0)在下一輪“事件循環(huán)”開始時執(zhí)行，Promise.resolve()在本輪“事件循環(huán)”結(jié)束時執(zhí)行，console.log('one')則是立即執(zhí)行，因此最先輸出。

setTimeout(function() {
  console.log(4)
}, 0);
new Promise(function(resolve) {
  console.log(1);
  for (var i = 0; i < 10000; i++) {
    i == 9999 && resolve()
  }
  console.log(2);
}).then(function() {
  console.log(5)
});
console.log(3);  //1 2 3 5 4

以上就是ECMAScript6中Promise的詳細(xì)內(nèi)容了，看完之后是否有所收獲呢？如果想了解更多相關(guān)內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊！