深入了解JavaScript Promise

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

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

一什么是 Promise？

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

二為什么有 Promise？

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

Callback hell

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

錯誤處理難：Promise 比 callback 在錯誤處理上更清晰直觀
同時進行多個異步操作的代碼編寫困難：Promise 可以簡單處理此情況

三 Promise常用api

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

四 Promise常用的兩個用法

1 如何解決 callback hell？

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

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

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

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

// foo
// foobar

.then()有返回值且返回值為另一個 Promise 對象的函數(shù)，也會使 Promise 繼續(xù)·。與前者的區(qū)別在于，再次調(diào)用.then()時可能會觸發(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() 實現(xiàn)并發(fā)同步接收返回值
應用場景描述（你需要同時調(diào)多個接口的數(shù)據(jù)，并在前端對數(shù)據(jù)進行處理，這就需要等待所有接口返回數(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   操作時間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()來實現(xiàn)調(diào)用。操作時間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()
      })
}

在這里插入圖片描述