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

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)文章

  • ie與firefox下的event使用說明與詳細(xì)區(qū)別

    ie與firefox下的event使用說明與詳細(xì)區(qū)別

    event是ie自帶的一個對象，而ff中不存在該對象，只能通過傳遞參數(shù)（并且惟一）的方式來實現(xiàn)event.
    2009-10-10
  • js實現(xiàn)文字選中分享功能

    js實現(xiàn)文字選中分享功能

    本文主要分享了js實現(xiàn)文字選中分享功能的示例代碼。具有很好的參考價值，下面跟著小編一起來看下吧
    2017-01-01
  • 推薦三款不錯的圖片壓縮上傳插件(webuploader、localResizeIMG4、LUploader)

    推薦三款不錯的圖片壓縮上傳插件(webuploader、localResizeIMG4、LUploader)

    這篇文章主要為大家詳細(xì)介紹了三款不錯的圖片壓縮上傳插件，webuploader、移動端上傳插件localResizeIMG4以及LUploader)
    2017-04-04
  • js仿微博動態(tài)欄功能

    js仿微博動態(tài)欄功能

    本文主要介紹了js仿微博動態(tài)欄功能的示例代碼，具有很好的參考價值，下面跟著小編一起來看下吧
    2017-02-02
  • js實現(xiàn)內(nèi)容顯示并使用json傳輸數(shù)據(jù)

    js實現(xiàn)內(nèi)容顯示并使用json傳輸數(shù)據(jù)

    這篇文章主要為大家詳細(xì)介紹了js實現(xiàn)內(nèi)容顯示并使用json傳輸數(shù)據(jù)的方法，感興趣的小伙伴們可以參考一下
    2016-03-03
  • JavaScript算法題之如何將一個數(shù)組旋轉(zhuǎn)k步

    JavaScript算法題之如何將一個數(shù)組旋轉(zhuǎn)k步

    這篇文章主要給大家介紹了關(guān)于JavaScript算法題之如何將一個數(shù)組旋轉(zhuǎn)k步的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
    2022-03-03
  • ES6學(xué)習(xí)筆記之字符串、數(shù)組、對象、函數(shù)新增知識點實例分析

    ES6學(xué)習(xí)筆記之字符串、數(shù)組、對象、函數(shù)新增知識點實例分析

    這篇文章主要介紹了ES6學(xué)習(xí)筆記之字符串、數(shù)組、對象、函數(shù)新增知識點,結(jié)合實例形式分析了ES6字符串、數(shù)組、對象、函數(shù)新增知識點、使用技巧與操作注意事項,需要的朋友可以參考下
    2020-01-01
  • JavaScript快速調(diào)試的兩個技巧

    JavaScript快速調(diào)試的兩個技巧

    這篇文章主要給大家介紹了關(guān)于JavaScript快速調(diào)試的兩個技巧，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-11-11
  • JS實現(xiàn)禁止鼠標(biāo)右鍵的功能

    JS實現(xiàn)禁止鼠標(biāo)右鍵的功能

    遇到網(wǎng)頁上有精美圖片或者精彩文字想保存時，通常大家都是選中目標(biāo)后按鼠標(biāo)右鍵，在彈出菜單中選擇“圖片另存為”或“復(fù)制”來達(dá)到我們的目的。但是，目前有許多網(wǎng)頁都屏蔽了鼠標(biāo)右鍵，那么用js如何實現(xiàn)禁止鼠標(biāo)右鍵的功能呢？下面小編給大家介紹下
    2016-10-10
  • JavaScript實現(xiàn)拖拽效果

    JavaScript實現(xiàn)拖拽效果

    這篇文章主要為大家詳細(xì)介紹了JavaScript實現(xiàn)拖拽效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2020-03-03

最新評論