目錄

• 一 什麼是 Promise？
• 二 為什麼有 Promise？
• 三 Promise常用api
• 四 Promise常用的兩個用法
• 總結

一 什麼是 Promise？

一個 Promise 物件就像容器一樣，在容器中寫著一段執行具體操作的程式碼，並且在這段程式碼執行結束後，會執行兩個回撥函式，一個是操作成功的回撥函式（resolve），一個是操作失敗的回撥函式（reject）

二 為什麼有 Promise？

Promise 的出現是為了解決非同步中，主要使用的回撥機制的幾個問題：

• Callback hell
  

Callback helwww.cppcns.coml：Promise 可以把一層層巢狀的 callback 變成 .then().then()…，從而使程式碼編寫和閱讀更直觀

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

三 Promise常用api

• .then() promise中方法執行完以後，可以執行，裡面有兩個引數，分別是成功的回撥函式和失敗的回撥函式。
• resolve 使用 promise.resolve 方法可以快速的返回一個promise物件
WQxXyTVU
• reject 使用 promise.reject 方法可以快速的返回一個promise物件
• all 同時執行多個並行非同步操作。

四 Promise常用的兩個用法

1 如何解決 callback hell？

.then()沒有返回值的函式，會使得 Promise 鏈不再延續，此時你再往後面呼叫 .then() 是沒有作用的。

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

.then()中有返回值函式，會使 Promise 鏈可以繼續

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

// foo
// foobar

.then()有返回值且返回值為另一個 Promise 物件的函式，也會使 Promise 繼續。與前者的區別在於，再次呼叫.then()時可能會觸發的是非同步操作，因此不是馬上觸發下一輪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() 實現併發同步接收返回值
應用場景描述（你需要同時調多個介面的資料，並在前端對資料進行處理，這就需要等待所有介面返回資料後才能操作。）

// 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區別

//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();

// WQxXyTVU 使用Promise.all()來實現呼叫。操作時間1秒
 function Index() {
      console.time()
      const p1 = new Promise((resolve,1000)
      })
      const p2 = new Promise((resolve,reject) => {
        console.log('這裡是p2')
        setTimeout(() => {
          resolve('這裡是p2的返回')
        },1000)
      })
      Promise.all([p1,p2]).then((val) => {
        console.log(vwww.cppcns.comal)
        console.timeEnd()
      })
}

總結

本篇文章就到這裡了，希望能夠給你帶來幫助，也希望您能夠多多關注我們的更多內容!