JavaScript 核心觀念(78) - Promise - Promise 與 AJAX

發表於 2022-05-08 分類於 JavaScript

Google AD

撰寫一篇文章其實真的很花時間，如果你願意「關閉 Adblock (廣告阻擋器)」來支持我的話，我會非常感謝你ヽ(・∀・)ﾉ

Liker 讚賞

這篇筆記文章如果對你有幫助，
你可以考慮花 30 秒登入 LikeCoin 並點擊下方拍手按鈕(最多五下)免費支持與鼓勵我。
或者你可以也可以請我「喝一杯咖啡(Donate)」。

｜

Promise 其實最常見於 AJAX，因此這一章節會講一下 Promise 跟 AJAX 的關係。

前言

Promise 其實最常見於 AJAX，因此這一章節會講一下 Promise 跟 AJAX 的關係。

Promise 與 AJAX

首先我們先看一段傳統的 AJAX Get 寫法

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://jsonplaceholder.typicode.com/todos/1');
xhr.send();
xhr.onload = function () {
  if(req.status === 200) {
     console.log(req.response);
  } else {
    console.log('失敗');
  }
}

上面是一個很基礎的 AJAX 寫法，我們可以看到光要寫這一段 API 請求就非常麻煩，或許有些人會將它包裝起來成為一個函式這也是一個好方法

function XHRCall(url) {
  const xhr = new XMLHttpRequest();
  xhr.open('GET', url);
  xhr.send();
  xhr.onload = function () {
    if(req.status === 200) {
      console.log(req.response);
    } else {
      console.log('失敗');
    }
  }
}

XHRCall('https://jsonplaceholder.typicode.com/todos/1');

雖然看起來很完美的解決，但是實際開發上來講一定不會只請求一個 API，有可能是 3~4 個，那你就該如何確保 API 請求呢？這時候就會搭配 Promise 來解決，確保執行成功與失敗，寫法也是非常像但是會加入 Promise

function XHRCall(url) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', url);
    xhr.send();
    xhr.onload = function () {
      if(req.status === 200) {
        resolve(req.response)
      } else {
        reject('失敗');
      }
    }
  })
}

像這樣子撰寫後，我們就可以確保 API 執行完畢之後才往下一個執行

function XHRCall(url) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', url);
    xhr.send();
    xhr.onload = function () {
      if(req.status === 200) {
        resolve(req.response)
      } else {
        reject('失敗');
      }
    }
  })
}

XHRCall('https://jsonplaceholder.typicode.com/todos/1')
  .then((res) => {
    console.log(res);
    return XHRCall('https://jsonplaceholder.typicode.com/todos/2')
  })
  .then((res) => {
    console.log(res);
    return XHRCall('https://jsonplaceholder.typicode.com/todos/3')
  })
  .catch((error) => {
    console.log(error);
  })

透過前面章節的小技巧後，我們就可以大幅優化 API 請求與使用鏈式技巧一直往下接唷~

參考文獻

JavaScript 核心篇