JavaScript 核心觀念(78) - Promise - 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 核心篇

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

前言

Promise 與 AJAX

參考文獻

你的支持會直接轉換成更多技術筆記

Terminal

相關文章

分享這篇文章

留言

前言

Promise 與 AJAX

參考文獻

你的支持會直接轉換成更多技術筆記

Terminal

相關文章

JavaScript 核心觀念(82) - ES6 章節：Async/Await - 撰寫高可用性高的錯誤捕捉

JavaScript 核心觀念(81) - ES6 章節：Async/Await - 使用 Async Function 改寫實戰範例

JavaScript 核心觀念(80) - ES6 章節：Async/Await - Async Function 與 Promise 之間的關聯性

JavaScript 核心觀念(79) - ES6 章節：Async/Await - 為什麼要使用 Async 與基本介紹

分享這篇文章

留言