快捷導(dǎo)航

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

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

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

一、promise promise的概念

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

特點(diǎn)：

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

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

promise使用方法

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

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

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

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

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

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

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

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

function resolveCallback(name, flag = true) {
      return new Promise((resolve, reject) => {
            // 處理異步任務(wù)
            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)結(jié)果
      console.log(res)
})

Promise.all()方法

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

如果所有的值都完成，這個(gè)promise 的結(jié)果是完成；

一旦它們中的某一個(gè)被拒絕，那么這個(gè)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ù)返回一個(gè) Promise，它將與第一個(gè)傳遞的 promise 相同的完成方式被完成。它可以是完成（ resolves），也可以是失?。╮ejects），這要取決于第一個(gè)完成的方式是兩個(gè)中的哪個(gè)。

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('失敗')
})