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（失敗）時調用 - 輸入參數：
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ù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
ie與firefox下的event使用說明與詳細區(qū)別
event是ie自帶的一個對象，而ff中不存在該對象，只能通過傳遞參數（并且惟一）的方式來實現event.2009-10-10
本文主要分享了js實現文字選中分享功能的示例代碼。具有很好的參考價值，下面跟著小編一起來看下吧2017-01-01
推薦三款不錯的圖片壓縮上傳插件(webuploader、localResizeIMG4、LUploader)
這篇文章主要為大家詳細介紹了三款不錯的圖片壓縮上傳插件，webuploader、移動端上傳插件localResizeIMG4以及LUploader)2017-04-04
本文主要介紹了js仿微博動態(tài)欄功能的示例代碼，具有很好的參考價值，下面跟著小編一起來看下吧2017-02-02
這篇文章主要為大家詳細介紹了js實現內容顯示并使用json傳輸數據的方法，感興趣的小伙伴們可以參考一下2016-03-03
這篇文章主要給大家介紹了關于JavaScript算法題之如何將一個數組旋轉k步的相關資料,文中通過實例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2022-03-03
這篇文章主要介紹了ES6學習筆記之字符串、數組、對象、函數新增知識點,結合實例形式分析了ES6字符串、數組、對象、函數新增知識點、使用技巧與操作注意事項,需要的朋友可以參考下2020-01-01
這篇文章主要給大家介紹了關于JavaScript快速調試的兩個技巧，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-11-11
遇到網頁上有精美圖片或者精彩文字想保存時，通常大家都是選中目標后按鼠標右鍵，在彈出菜單中選擇“圖片另存為”或“復制”來達到我們的目的。但是，目前有許多網頁都屏蔽了鼠標右鍵，那么用js如何實現禁止鼠標右鍵的功能呢？下面小編給大家介紹下2016-10-10
這篇文章主要為大家詳細介紹了JavaScript實現拖拽效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-03-03