欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JavaScript中Promise的then()方法用例詳解

 更新時間：2025年07月02日 10:45:08   作者：yhyvc  
在JavaScript中Promise是一種用于處理異步操作的編程模式,它代表了一個最終可能完成(解析)或失敗(拒絕)的操作及其結(jié)果值,這篇文章主要給大家介紹了關于JavaScript中Promise的then()方法用例的相關資料,需要的朋友可以參考下

前言

then() 是 Promise 的核心方法，用于處理異步操作的成功或失敗結(jié)果，并支持鏈式調(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ā)條件：當 Promise 狀態(tài)變?yōu)?nbsp;fulfilled（成功）時調(diào)用
  • 輸入?yún)?shù)：value（Promise 的解決值）
  • 返回值：可以是任意值或另一個 Promise，影響新 Promise 的狀態(tài)和結(jié)果

2. onRejected（可選）

  • 觸發(fā)條件：當 Promise 狀態(tài)變?yōu)?nbsp;rejected（失?。r調(diào)用
  • 輸入?yún)?shù)：reason（Promise 的拒絕原因）
  • 返回值：可以是任意值或另一個 Promise，用于恢復鏈式調(diào)用

參數(shù)默認行為

  • 如果忽略 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. 鏈式調(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. 微任務隊列

then() 的回調(diào)在微任務隊列中執(zhí)行，優(yōu)先于宏任務：

setTimeout(() => console.log("Macro Task"), 0);
Promise.resolve().then(() => console.log("Micro Task"));
// 輸出順序：Micro Task → Macro Task

五、用例說明

用例 1：鏈式數(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：錯誤恢復

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 鏈式調(diào)用的核心：處理成功/失敗狀態(tài)，返回新 Promise
  • 參數(shù)為函數(shù)：非函數(shù)參數(shù)會被忽略，可能導致意外結(jié)果
  • 錯誤處理優(yōu)先：始終用 .catch() 或 onRejected 處理錯誤
  • 返回值決定鏈式狀態(tài)：理解不同返回值類型的影響
  • 微任務機制：回調(diào)在微任務隊列執(zhí)行，優(yōu)先于宏任務

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

相關文章

最新評論