深入了解JavaScript Promise

更新時(shí)間：2021年12月28日 10:15:28 作者：Dormiveglia-flx

這篇文章主要為大家介紹了JavaScript Promise，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助

一什么是 Promise？

一個(gè) Promise 對(duì)象就像容器一樣，在容器中寫(xiě)著一段執(zhí)行具體操作的代碼，并且在這段代碼執(zhí)行結(jié)束后，會(huì)執(zhí)行兩個(gè)回調(diào)函數(shù)，一個(gè)是操作成功的回調(diào)函數(shù)（resolve），一個(gè)是操作失敗的回調(diào)函數(shù)（reject）

二為什么有 Promise？

Promise 的出現(xiàn)是為了解決異步編程中，主要使用的回調(diào)機(jī)制的幾個(gè)問(wèn)題：

Callback hell

Callback hell：Promise 可以把一層層嵌套的 callback 變成 .then().then()…，從而使代碼編寫(xiě)和閱讀更直觀(guān)

錯(cuò)誤處理難：Promise 比 callback 在錯(cuò)誤處理上更清晰直觀(guān)
同時(shí)進(jìn)行多個(gè)異步操作的代碼編寫(xiě)困難：Promise 可以簡(jiǎn)單處理此情況

三 Promise常用api

.then() promise中方法執(zhí)行完以后，可以執(zhí)行，里面有兩個(gè)參數(shù)，分別是成功的回調(diào)函數(shù)和失敗的回調(diào)函數(shù)。
resolve 使用 promise.resolve 方法可以快速的返回一個(gè)promise對(duì)象
reject 使用 promise.reject 方法可以快速的返回一個(gè)promise對(duì)象
all 同時(shí)執(zhí)行多個(gè)并行異步操作。

四 Promise常用的兩個(gè)用法

1 如何解決 callback hell？

.then()沒(méi)有返回值的函數(shù)，會(huì)使得 Promise 鏈不再延續(xù)，此時(shí)你再往后面調(diào)用 .then() 是沒(méi)有作用的。

Promise.resolve('foo').then(function(s) {
  console.log(s);
}).then(function(s) {
  // Never executed
  console.log(s);
});

.then()中有返回值函數(shù)，會(huì)使 Promise 鏈可以繼續(xù)

Promise.resolve('foo').then(function(s) {
  console.log(s);
  return s + 'bar';
}).then(function(s) {
  console.log(s);
});

// foo
// foobar

.then()有返回值且返回值為另一個(gè) Promise 對(duì)象的函數(shù)，也會(huì)使 Promise 繼續(xù)·。與前者的區(qū)別在于，再次調(diào)用.then()時(shí)可能會(huì)觸發(fā)的是異步操作，因此不是馬上觸發(fā)下一輪resolve()

Promise.resolve('foo').then(function(s) {
  return new Promise((resolve, reject) => {
      console.log(s);
      setTimeout(() => {
          resolve(s + 'bar')
        }, 1000);
    });
}).then(function(s) {
  console.log(s);
});


// foo
// foobar (在 "foo" 顯示了 1s 后顯示)

2 Promise.all() 實(shí)現(xiàn)并發(fā)同步接收返回值
應(yīng)用場(chǎng)景描述（你需要同時(shí)調(diào)多個(gè)接口的數(shù)據(jù)，并在前端對(duì)數(shù)據(jù)進(jìn)行處理，這就需要等待所有接口返回?cái)?shù)據(jù)后才能操作。）

// demo
const promise1 = Promise.resolve(3);
const promise2 = 42;
const promise3 = new Promise((resolve, reject) => {
  setTimeout(resolve, 100, 'foo');
});
 
Promise.all([promise1, promise2, promise3]).then((values) => {
  console.log(values);
});
// expected output: Array [3, 42, "foo"]

Promise.all() 與 sync await區(qū)別

//sync await   操作時(shí)間2秒
async function Index2() {
      console.time()
      const p1 =await new Promise((resolve, reject) => {
        console.log('這里是p1')
        setTimeout(() => {
          resolve('這里是p1的返回')
        }, 1000)
      })
      const p2 =await new Promise((resolve, reject) => {
        console.log('這里是p2')
        setTimeout(() => {
          resolve('這里是p2的返回')
        }, 1000)
      })
      console.log(p1)
      console.log(p2) 
      console.timeEnd()
   }
    Index2();

在這里插入圖片描述

//  使用Promise.all()來(lái)實(shí)現(xiàn)調(diào)用。操作時(shí)間1秒
 function Index() {
      console.time()
      const p1 = new Promise((resolve, reject) => {
        console.log('這里是p1')
        setTimeout(() => {
          resolve('這里是p1的返回')
        }, 1000)
      })
      const p2 = new Promise((resolve, reject) => {
        console.log('這里是p2')
        setTimeout(() => {
          resolve('這里是p2的返回')
        }, 1000)
      })
      Promise.all([p1, p2]).then((val) => {
        console.log(val)
        console.timeEnd()
      })
}

在這里插入圖片描述