Promise 與 Ajax

Abby 旦旦
Sep 12, 2021

--

以下提供promise和ajax的合併使用範例,當然你可以繼續使用原始 ajax 的寫法,只是如果抓的資料越多越複雜,promise 可以比較好管理

這是我們一般的ajax呼叫方法:

// 定義遠端路徑(這個網址會隨機給一個物件假資料)
var url = 'https://jsonplaceholder.typicode.com/todos/1';
// 定義 Http request(Web API)
var req = new XMLHttpRequest();
// 定義方法
req.open('GET', url);
// 當請求完成,則進行函式的結果
req.onload = function () {
if (req.status == 200) {
// 成功直接列出結果
console.log(req.response);
} else {
// 失敗的部分
}
};
// 送出請求
req.send();

使用 promise 結合 ajax 的寫法(多了粗體的地方):

// 定義遠端路徑(這個網址會隨機給一個物件假資料)
var url = 'https://jsonplaceholder.typicode.com/todos/1';
function get(url) {
return new Promise((resolve, reject) => {
// 定義 Http request(Web API)
var req = new XMLHttpRequest();
// 定義方法
req.open('GET', url);
// 當請求完成,則進行函式的結果
req.onload = function () {
if (req.status == 200) {
// 成功直接列出結果
resolve(req.response);
} else {
// 失敗的部分
reject(req);
}
};
// 送出請求
req.send();
})
}
get(url)
.then(res => {
console.log('get', res)
return get(url);
})
.then(res => {
console.log('get2', res)
})
.catch(err => {
console.log(err)
})

--

--

Abby 旦旦

從零開始轉職網頁設計,正在緩慢朝前端工程邁進中!偶爾會發一些讀後感和UI分享,ㄚㄚ!