JavaScript中Promise的then()方法用例詳解
更新時間：2025年07月02日 10:45:08 作者：yhyvc
在JavaScript中Promise是一種用于處理異步操作的編程模式,它代表了一個最終可能完成(解析)或失敗(拒絕)的操作及其結(jié)果值,這篇文章主要給大家介紹了關(guān)于JavaScript中Promise的then()方法用例的相關(guān)資料,需要的朋友可以參考下
前言
then() 是 Promise 的核心方法，用于處理異步操作的成功或失敗結(jié)果，并支持鏈?zhǔn)秸{(diào)用。以下是其定義、參數(shù)、使用方式、注意事項及用例說明。
一、then() 方法定義
語法：
promise.then( onFulfilled?: (value: T) => TResult | Promise<TResult>, onRejected?: (reason: any) => TError | Promise<TError> ): Promise<TResult | TError>
作用：
- 接收兩個回調(diào)函數(shù)（
onFulfilled和onRejected），分別處理 Promise 的成功和失敗狀態(tài) - 返回一個新的 Promise，其狀態(tài)由回調(diào)函數(shù)的執(zhí)行結(jié)果決定
二、參數(shù)說明
1. onFulfilled（可選）
- 觸發(fā)條件：當(dāng) Promise 狀態(tài)變?yōu)?nbsp;
fulfilled（成功）時調(diào)用 - 輸入?yún)?shù)：
value（Promise 的解決值） - 返回值：可以是任意值或另一個 Promise，影響新 Promise 的狀態(tài)和結(jié)果
2. onRejected（可選）
- 觸發(fā)條件：當(dāng) Promise 狀態(tài)變?yōu)?nbsp;
rejected（失?。r調(diào)用 - 輸入?yún)?shù)：
reason（Promise 的拒絕原因） - 返回值：可以是任意值或另一個 Promise，用于恢復(fù)鏈?zhǔn)秸{(diào)用
參數(shù)默認(rèn)行為
- 如果忽略
onFulfilled，則成功值直接傳遞給下一個.then() - 如果忽略
onRejected，則錯誤會沿鏈向下傳遞，直到被.catch()捕獲
三、使用方式
1. 基本用法
Promise.resolve(10)
.then((value) => {
console.log(value); // 輸出 10
return value * 2;
})
.then((result) => {
console.log(result); // 輸出 20
});
2. 錯誤處理
Promise.reject("Error!")
.then(
(value) => console.log("不會執(zhí)行"),
(reason) => {
console.error(reason); // 輸出 "Error!"
return "Recovered";
}
)
.then((result) => {
console.log(result); // 輸出 "Recovered"
});
3. 鏈?zhǔn)秸{(diào)用中的異步操作
function asyncAdd(a, b) {
return new Promise((resolve) => {
setTimeout(() => resolve(a + b), 1000);
});
}
asyncAdd(2, 3)
.then((sum) => asyncAdd(sum, 5))
.then((final) => console.log(final)); // 輸出 10（2秒后）
四、注意事項
1. 錯誤冒泡
如果未提供 onRejected 或未用 .catch()，錯誤會一直傳遞到鏈的末端：
Promise.reject("Error")
.then((value) => console.log("Success"))
.catch((err) => console.error(err)); // 必須捕獲
2. 返回值類型
- 返回普通值：新 Promise 直接成功
- 返回 Promise：新 Promise 跟隨其狀態(tài)
- 返回 thenable 對象：展開后生成新 Promise
Promise.resolve(1)
.then(() => ({
then(resolve) {
resolve("Thenable");
}
}))
.then((result) => console.log(result)); // 輸出 "Thenable"
3. 同步錯誤處理
在 then() 回調(diào)中拋出同步錯誤會自動觸發(fā)拒絕：
Promise.resolve()
.then(() => {
throw new Error("Oops!");
})
.catch((err) => console.error(err)); // 捕獲錯誤
4. 微任務(wù)隊列
then() 的回調(diào)在微任務(wù)隊列中執(zhí)行，優(yōu)先于宏任務(wù)：
setTimeout(() => console.log("Macro Task"), 0);
Promise.resolve().then(() => console.log("Micro Task"));
// 輸出順序：Micro Task → Macro Task
五、用例說明
用例 1：鏈?zhǔn)綌?shù)據(jù)處理
function fetchUser() {
return Promise.resolve({ id: 1, name: "Alice" });
}
fetchUser()
.then((user) => {
console.log("User:", user);
return user.name.toUpperCase();
})
.then((name) => {
console.log("Name:", name); // "ALICE"
});
用例 2：組合多個異步操作
function fetchOrder(userId) {
return Promise.resolve([{ id: 100, product: "Book" }]);
}
function fetchPayment(orderId) {
return Promise.resolve({ amount: 50 });
}
fetchUser()
.then((user) => fetchOrder(user.id))
.then((orders) => fetchPayment(orders[0].id))
.then((payment) => console.log("Payment:", payment.amount)) // 50
.catch((err) => console.error("Chain failed:", err));
用例 3：錯誤恢復(fù)
Promise.reject("Network Error")
.then(null, (reason) => {
console.log("Fallback to cached data");
return { data: "Cached Data" };
})
.then((data) => {
console.log("Data:", data.data); // "Cached Data"
});
總結(jié)
then()是 Promise 鏈?zhǔn)秸{(diào)用的核心：處理成功/失敗狀態(tài)，返回新 Promise- 參數(shù)為函數(shù)：非函數(shù)參數(shù)會被忽略，可能導(dǎo)致意外結(jié)果
- 錯誤處理優(yōu)先：始終用
.catch()或onRejected處理錯誤 - 返回值決定鏈?zhǔn)綘顟B(tài)：理解不同返回值類型的影響
- 微任務(wù)機制：回調(diào)在微任務(wù)隊列執(zhí)行，優(yōu)先于宏任務(wù)
到此這篇關(guān)于JavaScript中Promise的then()方法詳解的文章就介紹到這了,更多相關(guān)JS Promise的then()方法內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了原生JavaScript實現(xiàn)五子棋游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-11-11
js中沒有foreach這個關(guān)鍵字，但是可以用var v in array來實現(xiàn)遍歷，下面有個不錯的示例，大家可以參考下2014-05-05
這篇文章介紹了Ajax實現(xiàn)郵箱驗證的方法，文中通過示例代碼介紹的非常詳細(xì)。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-04-04
最近公司需求做一個微信紅包雨功能,這里給大家總結(jié)下實現(xiàn)的方法,這篇文章主要給大家介紹了關(guān)于uni-app微信小程序之紅包雨活動的相關(guān)資料,需要的朋友可以參考下2024-01-01
本文給大家介紹的是使用javascript來實現(xiàn)一款經(jīng)典的老游戲--推箱子，主要側(cè)重于實現(xiàn)的思路，最后附上源碼給大家。2015-07-07
用JSON.parse 來轉(zhuǎn)換成json對象，由于有注釋的存在則無法正確轉(zhuǎn)換甚至報錯。匹配字符串中的所有注釋，包括單行和多行注釋2013-11-11
使用JavaScript實現(xiàn)一個簡單的哈希映射功能
哈希表大家應(yīng)該都經(jīng)常用到吧,那么大家有沒有想過哈希表是怎么實現(xiàn)的呢,本文我們就來從一道簡單的題目來了解一下哈希表的簡單原理和實現(xiàn)吧2024-02-02
這篇文章主要介紹了基于微前端qiankun的多頁簽緩存方案實踐,本文對qiankun框架的使用沒有做太多的發(fā)散總結(jié)，官網(wǎng)和Github上已經(jīng)有很多相關(guān)問題的總結(jié)和踩坑經(jīng)驗可供參考，需要的朋友可以參考下2022-08-08
JavaScript是基于原型繼承的語言,每個對象都有一個原型（prototype）,本文則是重點對prototype相關(guān)知識點做拆解和梳理,感興趣的可以了解下2023-08-08
今天學(xué)習(xí)Javascript函數(shù)，發(fā)現(xiàn)這完全是一個神奇的東西。跟我們平常所見強類型語言中的函數(shù)有好多不同。下面我們就從C#和JavaScript的兩個計算階乘的函數(shù)中比較兩者的異同2012-05-05