一、相關(guān)概念介紹

1.什么是Promise

在JavaScript中，Promise是一個(gè)用于進(jìn)行異步編程的構(gòu)造函數(shù)。它是ES6中引入的一個(gè)重要概念，用于處理異步操作。Promise是JavaScript中用于處理異步操作的對(duì)象，它代表了一個(gè)尚未完成但最終會(huì)完成或失敗的操作。Promise的目的是以更優(yōu)雅的方式書(shū)寫(xiě)復(fù)雜的異步任務(wù)，從而提高代碼的可讀性和可維護(hù)性。

2.Promise狀態(tài)

Promise對(duì)象代表一個(gè)異步操作，有三種狀態(tài)：Pending（進(jìn)行中）、Resolved（已完成）和Rejected（已失敗）。

• 當(dāng)Promise被創(chuàng)建后，它的狀態(tài)是Pending。
• 當(dāng)操作成功完成，它的狀態(tài)變成fulfilled,并傳遞一個(gè)值作為成功的結(jié)果。此時(shí)，then中的用于處理成功操作的回調(diào)會(huì)被執(zhí)行。
• 當(dāng)操作失敗，它的狀態(tài)變成rejected,并傳遞失敗的原因。此時(shí)，then中的用于處理失敗操作的回調(diào)會(huì)被執(zhí)行。

3.創(chuàng)建Promise

通過(guò)構(gòu)造函數(shù)創(chuàng)建一個(gè)Promise對(duì)象，構(gòu)造函數(shù)接收一個(gè)函數(shù)作為參數(shù)，該函數(shù)的兩個(gè)參數(shù)分別是resolve和reject。resolve函數(shù)的作用是將Promise對(duì)象的狀態(tài)從Pending變?yōu)镽esolved，在then方法中傳入的回調(diào)函數(shù)會(huì)被調(diào)用。reject函數(shù)的作用是將Promise對(duì)象的狀態(tài)從Pending變?yōu)镽ejected，在catch方法中傳入的回調(diào)函數(shù)會(huì)被調(diào)用。

4.then()方法

• Promise對(duì)象身上有then方法，可用來(lái)指定回調(diào)，對(duì)成功和失敗的結(jié)果進(jìn)行處理。
• then() 接受兩個(gè)參數(shù)，一個(gè)處理成功狀態(tài)的回調(diào)，另一個(gè)是處理失敗狀態(tài)的回調(diào)。
• then()返回的是一個(gè)Promise對(duì)象，支持鏈?zhǔn)秸{(diào)用。
• then()方法中不能改變Promise的狀態(tài)。

5.catch方法

Promise對(duì)象的catch方法用于捕獲鏈中的任何一步的錯(cuò)誤。

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

• then()和catch都會(huì)返回Promise對(duì)象，所以可以使用鏈?zhǔn)秸{(diào)用來(lái)處理多個(gè)異步操作，解決了多層嵌套的問(wèn)題。
• 可以解決異步編程回調(diào)地獄的問(wèn)題。

7.異步編程

在JS中，Promise是一個(gè)代表了異步操作最終完成或失敗，及其結(jié)果值的對(duì)象。它允許開(kāi)發(fā)人員為異步操作的成功和失敗情況注冊(cè)處理程序，極大地簡(jiǎn)化了異步編程的復(fù)雜性。

二、使用

1.構(gòu)造Promise

new Promise(function(resolve,rejecrt)
{
    //異步操作
    //.......
    //操作成功
    resolve("success");
}).then(value=>{
    console.log(value);
});

Promise構(gòu)造函數(shù)接受一個(gè)函數(shù)類(lèi)型的參數(shù)executor，我們稱(chēng)executor為執(zhí)行器函數(shù)。

2.executor 函數(shù)

• executor 函數(shù)在 Promise 構(gòu)造函數(shù)中是作為一個(gè)參數(shù)被傳入，并在 Promise 對(duì)象被創(chuàng)建后立即執(zhí)行。 executor可以是用function申明的函數(shù)，也可以是箭頭函數(shù)。
• executor 函數(shù)帶有 resolve 和 reject 兩個(gè)函數(shù)類(lèi)型的參數(shù) 。當(dāng)調(diào)用任意一個(gè)參數(shù)時(shí)，會(huì)改變 Promise 對(duì)象的狀態(tài)。
• 異步操作成功時(shí)，調(diào)用 resolve 函數(shù)， Promise 對(duì)象的狀態(tài)就會(huì)由 pending 變?yōu)?nbsp;fulfilled（已兌現(xiàn)），并返回 executor 函數(shù)中 resolve 的參數(shù)（成功的值）。
• 異步操作失敗時(shí)，調(diào)用 reject 函數(shù)， Promise 對(duì)象的狀態(tài)就會(huì)由 pending 變?yōu)閞ejected（已拒絕），并返回 executor 函數(shù)中 reject 的參數(shù)（失敗的原因）。
• executor 中拋出的任何錯(cuò)誤都會(huì)導(dǎo)致 Promise 被拒絕，并且返回值將被忽略。

3.then() 方法

const p1= new Promise(function(resolve,rejecrt)
{
    setTimeout(() => {
        var currentSecond = new Date().getSeconds();
        //獲取當(dāng)前時(shí)間的秒數(shù)，若為偶數(shù)則操作成功，否則為操作失敗
        if(currentSecond%2===0)
        {
            //操作成功
            resolve(currentSecond);//p1的狀態(tài)轉(zhuǎn)變成fulfilled
            console.log(p1);
        }
        else
        {
            rejecrt(new Error(currentSecond));//操作失敗，p1的狀態(tài)轉(zhuǎn)變成rejected
            console.log(p1);
        }
    }, 1000);

})
p1.then(value=>{
        console.log("success: "+value);//處理操作成功的情況
    })
.catch(error=>{
    console.error(error);//處理失敗的情況
});

由運(yùn)行結(jié)果可知：

• reject函數(shù)用于將Promise狀態(tài)轉(zhuǎn)成rejected狀態(tài)，并傳遞一個(gè)原因作為失敗的結(jié)果。
• resolve函數(shù)用于將Promise狀態(tài)轉(zhuǎn)成fulfilled狀態(tài)，并傳遞一個(gè)值作為成功的結(jié)果。
• Promise狀態(tài)轉(zhuǎn)成fulfilled時(shí)，執(zhí)行then方法。當(dāng)狀態(tài)轉(zhuǎn)成rejected時(shí)，被catch捕獲。

4.then() 方法返回的Promise的狀態(tài)

下面的3段代碼將討論：根據(jù)回調(diào)函數(shù)返回值的不同類(lèi)型，確定then() 方法返回的Promise對(duì)象的狀態(tài)值。
第1種情況：promise操作成功，回調(diào)函數(shù)返回非Promise對(duì)象

const promise= new Promise(function(resolve,rejecrt)
{
    //操作成功
    resolve('success');//p1的狀態(tài)轉(zhuǎn)變成fulfilled
})
const p1=promise.then(value=>{//接受promise成功的回調(diào)
        return '345678'
    },reason=>{})
console.log(p1);

第二種情況：promise操作失敗，回調(diào)函數(shù)返回非Promise對(duì)象

const promise= new Promise(function(resolve,rejecrt)
{
    //失敗成功
    rejecrt('fail');//p1的狀態(tài)轉(zhuǎn)變成fulfilled
})
const p1=promise.then(value=>{},reason=>{
        return '123456'
    })
console.log(p1);

promise回調(diào)函數(shù)拋出異常

const promise= new Promise(function(resolve,rejecrt)
{
    //操作成功
    resolve('success');//p1的狀態(tài)轉(zhuǎn)變成fulfilled
})
const p1=promise.then(value=>{//在回調(diào)函數(shù)中拋出異常
        throw '出錯(cuò)了'
    },reason=>{})
console.log(p1);

promise回調(diào)函數(shù)返回Promise對(duì)象

const promise= new Promise(function(resolve,rejecrt)
{
    //操作成功
    resolve('success');//p1的狀態(tài)轉(zhuǎn)變成fulfilled
})
const p1=promise.then(value=>{
        //回調(diào)函數(shù)返回Promise對(duì)象
        return new Promise((resolve,rejecrt)=>{
            resolve('成功了');
        })
    },reason=>{})
console.log(p1);

根據(jù)上面的四種情況，我們可以得出結(jié)論如下：

• 1）promise操作成功，回調(diào)函數(shù)返回非Promise對(duì)象，p1的狀態(tài)是fulfilled
• 2）promise操作失敗，回調(diào)函數(shù)返回非Promise對(duì)象，p1的狀態(tài)是fulfilled
• 3）promise回調(diào)函數(shù)拋出異常，p1的狀態(tài)是rejected
• 4）回調(diào)函數(shù)的返回結(jié)果是promise對(duì)象，則p1的狀態(tài)就取決于return返回的這個(gè)promise對(duì)象內(nèi)部的狀態(tài)，內(nèi)部為resolve, 則p1狀態(tài)為fulfilled，內(nèi)部為reject，則p1狀態(tài)為rejected

三、Async/Await語(yǔ)法糖

‌Async/Await是基于Promise的語(yǔ)法糖‌，使得異步代碼的編寫(xiě)更加簡(jiǎn)潔和易于理解。使用async關(guān)鍵字聲明異步函數(shù)，await關(guān)鍵字用于在函數(shù)中等待Promise的解析。await只能在async函數(shù)內(nèi)部使用。

async function asyncFunction() {
  console.log("程序開(kāi)始");
  const promise = new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("兩秒后，耗時(shí)的任務(wù)操作成功");
    }, 2000);
  });
  const result = await promise; // 等待promise解析
  console.log(result); // 輸出: Resolved
}

console.log(asyncFunction()); // 調(diào)用異步函數(shù)
console.log('程序結(jié)束')

• async 標(biāo)記的函數(shù)是個(gè)Promise對(duì)象。
• 如果表達(dá)式是promise對(duì)象并且狀態(tài)為成功，那么await將返回的是這個(gè)promise對(duì)象成功的值。
• 如果表達(dá)式是promise對(duì)象，并且它失敗了，那么就要通過(guò)try，catch進(jìn)行捕獲錯(cuò)誤，不捕獲錯(cuò)誤那么后面代碼無(wú)法執(zhí)行.

四、Promise應(yīng)用場(chǎng)景

• 定時(shí)器：可以使用 Promise 來(lái)管理定時(shí)器操作，譬如延遲執(zhí)行某個(gè)任務(wù)或定時(shí)輪詢(xún)服務(wù)器。
• Ajax 請(qǐng)求：使用 Promise 可以更方便地管理 Ajax 請(qǐng)求。例如，在使用 Fetch API ，Axios或其他 Ajax 庫(kù)時(shí)，可以將異步操作封裝在 Promise 中，以便更好地處理成功和失敗的情況 。
• 文件操作：在文件的讀、寫(xiě)或上傳等操作時(shí)，Promise 可以提供更清晰的代碼結(jié)構(gòu)和錯(cuò)誤機(jī)制處理。

五、總結(jié)

Promise 是一種用于處理異步操作的 JavaScript 對(duì)象，它提供了一種更清晰、更可靠的方式來(lái)管理異步代碼。以下是 Promise 的主要特點(diǎn)和優(yōu)勢(shì)的總結(jié)：

• 簡(jiǎn)化異步操作：Promise 可以幫助我們更輕松地處理異步操作，以及在操作完成后執(zhí)行相應(yīng)的邏輯。
• 鏈?zhǔn)秸{(diào)用：鏈?zhǔn)秸{(diào)用使得多個(gè)異步任務(wù)能夠順序執(zhí)行，每個(gè)任務(wù)的輸出可以作為下一個(gè)任務(wù)的輸入。這種方式大大提高了代碼的可讀性和可維護(hù)性。與嵌套回調(diào)相比，鏈?zhǔn)秸{(diào)用避免了多層嵌套，使代碼更為扁平和直觀。
• 錯(cuò)誤處理機(jī)制：如果鏈?zhǔn)秸{(diào)用中任意一個(gè) Promise 被拒絕（rejected），后續(xù)的 then() 將會(huì)跳過(guò)，直接進(jìn)入下一個(gè) catch()。這是 Promise 鏈中獨(dú)特的錯(cuò)誤處理機(jī)制，確保開(kāi)發(fā)者能夠集中處理異步操作中的錯(cuò)誤。
• 異步任務(wù)的順序執(zhí)行：當(dāng)我們需要依次執(zhí)行多個(gè)異步操作時(shí)，鏈?zhǔn)秸{(diào)用可以提供非常簡(jiǎn)潔的代碼結(jié)構(gòu)。
• 避免回調(diào)地獄：：Promise 可以解決回調(diào)地獄問(wèn)題，使代碼結(jié)構(gòu)更加清晰和易于理解。Promise.then返回的也是一個(gè)promise對(duì)象，因此可以進(jìn)行鏈?zhǔn)秸{(diào)用。這也是promise可以解決異步編程回調(diào)地獄的原因。

到此這篇關(guān)于JavaScript中Promise用法大全的文章就介紹到這了,更多相關(guān)JS中Promise用法內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論