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