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

前言

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

Promise 與 AJAX

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

1
2
3
4
5
6
7
8
9
10
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 請求就非常麻煩,或許有些人會將它包裝起來成為一個函式這也是一個好方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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 執行完畢之後才往下一個執行

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
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 請求與使用鏈式技巧一直往下接唷~

參考文獻