快捷導(dǎo)航

javascript中Promise的三種狀態(tài)示例詳解

更新時間：2024年10月29日 08:27:10 作者：聽海邊濤聲

這篇文章主要給大家通過講解和實踐,詳細介紹了Promise對象的三種狀態(tài)：pending（待定）、fullfilled（已兌現(xiàn)）、rejected（已拒絕）,并通過日志查看,展示了Promise狀態(tài)的改變順序,幫助讀者更好的理解和應(yīng)用Promise,需要的朋友可以參考下

說明

通過了解Promise的三種狀態(tài)，可以了解Promise對象是如何關(guān)聯(lián)的處理函數(shù)，以及代碼的執(zhí)行順序。

一個Promise對象，必然處于以下幾種狀態(tài)之一：

pending（待定）：初始狀態(tài)，既沒有被兌現(xiàn)，也沒有被拒絕
fullfilled（已兌現(xiàn)）：操作成功完成
rejected（已拒絕）：操作失敗

Promise對象一旦被兌現(xiàn)或拒絕了，就是已敲定了，狀態(tài)無法再被改變。

示例

Promise創(chuàng)建后處于pending狀態(tài)

注意：下面代碼中，為了有時間查看狀態(tài)，所以setTimeout的超時時間可以設(shè)置得大一些，如果設(shè)置成1秒、2秒，可能來不及看，狀態(tài)就改變了。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>認識Promise狀態(tài)</title>
</head>

<body>
  <script>
    /**
     * 目標：認識Promise狀態(tài)
    */
    // 1. 創(chuàng)建Promise對象
    const p = new Promise((resolve, reject) => {
      // 2. 執(zhí)行異步代碼
      setTimeout(() => {
        // resolve('模擬AJAX請求-成功結(jié)果')
        reject(new Error('模擬AJAX請求-失敗結(jié)果'))
      }, 5000)
    })
    console.log(p)

    // 3. 獲取結(jié)果
    p.then(result => {
      console.log(result)
    }).catch(error => {
      console.log(error)
    })


  </script>
</body>

</html>

通過打印日志查看Promise的成功狀態(tài)的改變順序

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>認識Promise狀態(tài)</title>
</head>

<body>
  <script>
    /**
     * 目標：認識Promise狀態(tài)
    */
    // 1. 創(chuàng)建Promise對象
    const p = new Promise((resolve, reject) => {
      // Promise對象創(chuàng)建時，這里面的代碼都會被執(zhí)行了，然后then()內(nèi)的回調(diào)函數(shù)執(zhí)行
      console.log('Promise對象內(nèi)開始執(zhí)行')
      // 2. 執(zhí)行異步代碼
      setTimeout(() => {
      	// 當resolve被調(diào)用后，Promise狀態(tài)就變成了fullfilled狀態(tài)
        resolve('模擬AJAX請求-成功結(jié)果')
        // reject(new Error('模擬AJAX請求-失敗結(jié)果'))
      }, 5000)
    })
    console.log(p)

    // 3. 獲取結(jié)果
    p.then(result => {
      console.log(result)
    }).catch(error => {
      console.log(error)
    })


  </script>
</body>

</html>

5秒（代碼中定時器設(shè)置的是5000毫秒）以后，狀態(tài)改變?yōu)閒ullfilled：

通過打印日志查看Promise的失敗狀態(tài)的改變順序

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>認識Promise狀態(tài)</title>
</head>

<body>
  <script>
    /**
     * 目標：認識Promise狀態(tài)
    */
    // 1. 創(chuàng)建Promise對象
    const p = new Promise((resolve, reject) => {
      // Promise對象創(chuàng)建時，這里面的代碼都會被執(zhí)行了
      console.log('Promise對象內(nèi)開始執(zhí)行')
      // 2. 執(zhí)行異步代碼
      setTimeout(() => {
        // 當resolve被調(diào)用后，Promise狀態(tài)就變成了fullfilled狀態(tài)，然后then()內(nèi)的回調(diào)函數(shù)執(zhí)行
        // resolve('模擬AJAX請求-成功結(jié)果')
        // 當 reject被調(diào)用后，Promise狀態(tài)就變成了rejected狀態(tài)，然后catch()內(nèi)的回調(diào)函數(shù)執(zhí)行
        reject(new Error('模擬AJAX請求-失敗結(jié)果'))
      }, 5000)
    })
    console.log(p)

    // 3. 獲取結(jié)果
    p.then(result => {
      console.log(result)
    }).catch(error => {
      console.log(error)
    })


  </script>
</body>

</html>