關于promise和async用法以及區(qū)別詳解

更新時間：2023年01月10日 10:26:06 作者：suoh's?Blog

Promise是一個構造函數(shù),我們就可以new Promise()得到一個 Promise的實例,下面這篇文章主要給大家介紹了關于promise和async用法以及區(qū)別的相關資料,需要的朋友可以參考下

一、promise promise的概念

Promise 是異步編程的一種解決方案，是一個構造函數(shù)，自身有all、reject、resolve方法，原型上有then、catch等方法。

特點：

對象的狀態(tài)不受外界影響。Promise對象代表一個異步操作，有三種狀態(tài)：pending（進行中）、fulfilled（已成功）和rejected（已失敗）
一旦狀態(tài)改變，就不會再變，任何時候都可以得到這個結果。Promise對象的狀態(tài)改變，只有兩種可能：從pending變?yōu)閒ulfilled和從pending變?yōu)閞ejected。

一句話總結：就是用來解決地域回調(diào)問題（地域回調(diào)--回調(diào)函數(shù)里面嵌套回調(diào)函數(shù)）

promise使用方法

用法一：Promise構造函數(shù)接受一個函數(shù)作為參數(shù)，該函數(shù)的兩個參數(shù)分別是resolve和reject。它們是兩個函數(shù)，由JavaScript引擎提供。

resolve函數(shù)的作用是，將Promise對象的狀態(tài)從“未完成”變?yōu)?ldquo;成功”（即從Pending變?yōu)镽esolved），在異步操作成功時調(diào)用，并將異步操作的結果作為參數(shù)傳遞出去。

reject函數(shù)的作用是，將Promise對象的狀態(tài)從“未完成”變?yōu)?ldquo;失敗”（即從Pending變?yōu)镽ejected），在異步操作失敗時調(diào)用，并將異步操作報出的錯誤作為參數(shù)傳遞出去。

用法二：Promise.resolve() 和 Promise.reject() 可以直接被調(diào)用。有時候，當判斷出 promise 并不需要真正執(zhí)行時，我們并不需要使用 new 創(chuàng)建 Promise 對象，而是可以直接調(diào)用 Promise.resolve() 和 Promise.reject()。

地獄回調(diào)的例子

回調(diào)地獄是為了讓我們代碼執(zhí)行順序的一種操作（解決異步），但是它會使我們的可讀性非常差。

//地獄回調(diào)
setTimeout(function () { //第一層
      console.log('小鎖'); //等3秒打印張三在執(zhí)行下一個回調(diào)函數(shù)
      setTimeout(function () { //第二層
            console.log('李四'); //等2秒打印李四在執(zhí)行下一個回調(diào)函數(shù)
            setTimeout(function () { //第三層
                  console.log('王五'); //等一秒打印王五
            }, 1000)
      }, 2000)
}, 3000)

promise解決地域回調(diào)

function resolveCallback(name, flag = true) {
      return new Promise((resolve, reject) => {
            // 處理異步任務
            setTimeout(() => {
                  if (flag) {
                        resolve(name)
                  } else {
                        reject('失敗')
                  }
            }, 1000)
      }, )
}
resolveCallback('張三').then(res => {
      console.log(res)
      return resolveCallback('李四')
}).then(res => {
      console.log(res)
      return resolveCallback('王五')
}).then(res => {
      console.log(res)
}).catch(res => { //捕捉失敗的回調(diào)結果
      console.log(res)
})

Promise.all()方法

Promise.all([ .. ]) 接受一個或多個值的數(shù)組（比如，立即值、promise、thenable）。它返回一個promise。

如果所有的值都完成，這個promise 的結果是完成；

一旦它們中的某一個被拒絕，那么這個promise 就立即被拒絕。

let p1 = resolveCallback('張三')
let p2 = resolveCallback('李四')
let p3 = resolveCallback('王五')
let p = Promise.all([p1,p2,p3]).then(res=>{
      console.log(res)
}).catch(res=>{
      console.log('失敗')
})

Promise.race 方法

Promise.race() 函數(shù)返回一個 Promise，它將與第一個傳遞的 promise 相同的完成方式被完成。它可以是完成（ resolves），也可以是失?。╮ejects），這要取決于第一個完成的方式是兩個中的哪個。

let p1 = resolveCallback('張三', 2)
let p2 = resolveCallback('李四', 3)
let p3 = resolveCallback('王五', 1)
let p = Promise.race([p1, p2, p3]).then(res => {
      console.log(res)
}).catch(res => {
      console.log('失敗')
})