ES6 Promise基礎(chǔ)用法(resolve、reject、then、catch,all)
在 JavaScript 中,Promise 是一種用于處理異步操作的對象。它允許開發(fā)者以一種更清晰和更可控的方式來處理異步操作,避免回調(diào)地獄的問題。Promise 對象有以下幾個(gè)狀態(tài):
Pending:初始狀態(tài),表示異步操作正在進(jìn)行中。
Fulfilled:表示異步操作成功完成。
Rejected:表示異步操作失敗。
Promise 對象提供了兩個(gè)方法來改變其狀態(tài):resolve 和 reject。then 和 catch 方法用于處理 Promise 的成功和失敗狀態(tài)。all 方法用于等待一組 Promise 實(shí)例都完成。
以下是 Promise 的基礎(chǔ)用法詳解:
創(chuàng)建一個(gè) Promise: 使用 new Promise() 創(chuàng)建一個(gè)新的 Promise 對象,并傳入一個(gè)函數(shù)作為參數(shù)。這個(gè)函數(shù)稱為執(zhí)行器(executor),它接受兩個(gè)參數(shù):resolve 和 reject。resolve 函數(shù)用于將 Promise 的狀態(tài)設(shè)置為 fulfilled,而 reject 函數(shù)用于將 Promise 的狀態(tài)設(shè)置為 rejected。
const promise = new Promise((resolve, reject) => {
// 異步操作
if (/* 異步操作成功 */) {
resolve(/* 成功的結(jié)果 */);
} else {
reject(/* 失敗的原因 */);
}
});使用 then 方法: then 方法用于處理 Promise 的 fulfilled 狀態(tài)。它接受兩個(gè)參數(shù):一個(gè)函數(shù)用于處理成功的結(jié)果,另一個(gè)函數(shù)用于處理失敗的結(jié)果(可選)。
promise.then((result) => {
// 成功的回調(diào)函數(shù)
console.log(result);
}, (error) => {
// 失敗的回調(diào)函數(shù)(可選)
console.error(error);
});使用 catch 方法: catch 方法用于處理 Promise 的 rejected 狀態(tài)。它相當(dāng)于只傳入失敗回調(diào)函數(shù)的 then 方法。
promise.catch((error) => {
// 失敗的回調(diào)函數(shù)
console.error(error);
});使用 all 方法: all 方法用于等待一組 Promise 實(shí)例都完成。它返回一個(gè)新的 Promise 對象,當(dāng)所有的 Promise 實(shí)例都成功時(shí),這個(gè)新的 Promise 對象才會(huì)成功;如果有任何一個(gè) Promise 實(shí)例失敗,那么這個(gè)新的 Promise 對象也會(huì)失敗。
const promises = [promise1, promise2, promise3];
Promise.all(promises).then((results) => {
// 所有 Promise 實(shí)例都成功時(shí)的回調(diào)函數(shù)
console.log(results);
}).catch((error) => {
// 任何一個(gè) Promise 實(shí)例失敗時(shí)的回調(diào)函數(shù)
console.error(error);
});使用 race 方法: race 方法用于等待一組 Promise 實(shí)例中的任意一個(gè)完成。它返回一個(gè)新的 Promise 對象,當(dāng)?shù)谝粋€(gè) Promise 實(shí)例完成時(shí),這個(gè)新的 Promise 對象就會(huì)完成,無論其是成功還是失敗。
const promises = [promise1, promise2, promise3];
Promise.race(promises).then((result) => {
// 第一個(gè) Promise 實(shí)例完成時(shí)的回調(diào)函數(shù)
console.log(result);
}).catch((error) => {
// 第一個(gè) Promise 實(shí)例失敗時(shí)的回調(diào)函數(shù)
console.error(error);
});到此這篇關(guān)于ES6 Promise基礎(chǔ)用法(resolve、reject、then、catch,all)的文章就介紹到這了,更多相關(guān)ES6 Promise用法內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
前端實(shí)現(xiàn)水印功能的幾種方法及優(yōu)缺點(diǎn)
這篇文章主要介紹了前端開發(fā)中實(shí)現(xiàn)網(wǎng)頁或圖像水印的六種方法,包括使用CSS背景圖、HTML5?Canvas、SVG、圖片處理庫、HTML?DOM元素以及后端生成,每種方法都有其優(yōu)缺點(diǎn),適用于不同的場景,需要的朋友可以參考下2025-01-01
微信小程序?qū)W習(xí)筆記之本地?cái)?shù)據(jù)緩存功能詳解
這篇文章主要介紹了微信小程序?qū)W習(xí)筆記之本地?cái)?shù)據(jù)緩存功能,結(jié)合實(shí)例形式分析了微信小程序wx.setStorage、wx.getStorage以及wx.removeStorage、wx.clearStorage針對數(shù)據(jù)緩存的存取、刪除等相關(guān)操作技巧,需要的朋友可以參考下2019-03-03
BootStrap 智能表單實(shí)戰(zhàn)系列(十)自動(dòng)完成組件的支持
這篇文章主要介紹了BootStrap 智能表單實(shí)戰(zhàn)系列(十)自動(dòng)完成組件的支持 的相關(guān)資料,需要的朋友可以參考下2016-06-06
一個(gè)JavaScript防止表單重復(fù)提交的實(shí)例
防止重復(fù)表單提交的方法有很多,本文使用JavaScript來實(shí)現(xiàn)防止表單重復(fù)提交,很簡單,但很實(shí)用,新手朋友們不要錯(cuò)過2014-10-10
JS實(shí)現(xiàn)簡單的九宮格抽獎(jiǎng)
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)簡單的九宮格抽獎(jiǎng),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-06-06

