以下提供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)
})