Javascript Promise 範例

Promise 現在已經被大部分瀏覽器所支援 (IE 以外),在處理非同步的操作是一大助力,最近在寫 Node.js 也不需要再仰賴其它套件就能夠直接處理非同步問題,以下就提供一個範例來介紹簡單的 Promise 的操作過程。

See the Pen ES6 Promise by Wcc723 (@Wcc723) on CodePen.

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
(function() {
let epaAPI = "http://opendata.epa.gov.tw/ws/Data/UV/?$orderby=PublishAgency&$skip=0&$top=1000&format=json&callback=?";
let errorUrl = "http://opendata.epa.gov.tw/ws/Data/UL/?$orderby=PublishAgency&$skip=0&$top=1000&format=json&callback=?";
let _DefaultContry = '臺北市';
var getData = (url)=> { // 傳入的 URL
return new Promise((resolve, reject) => { // return promise
$.getJSON( url, function(){
format: "json"
}).done(function(data) {
if (data) {
resolve(data); // 成功後透過 resolve 回傳值
} else {
reject('Error');
}
}).fail(function() {
reject('Error');
});
});
}
getData(epaAPI) // 傳入的 url
.then((data)=>{ // then 接受回傳的值
console.log(data);
$.each( data, function( i, item ) {
console.log(item);
let list = `<li>${item.SiteName} ${item.PublishTime} ${item.SiteName} ${item.UVI}</li>`
//利用item.值,把每一個值取出,並寫成一個html存在list的變數內
$('.itemlist').append(list);
//最後把剛剛的html放到表格內
});
});
getData(errorUrl) // 傳入錯誤的 url
.then((data)=>{ // then 接受回傳的值 (錯誤的狀況不會跑這段)
console.log(data);
})
.catch((response)=> { // 錯誤狀態的回傳
console.log('errorUrl:', response);
});
})();

說明

new Promise

var getData() 裡面包含非同步的 Ajax,如果直接套用 getData() 會無法確實取得資料後再執行其他 function,所以這時候在內部加上 new Promise() 確保 Ajax 完成後再回傳資料。
getData(epaAPI) 套用時可以傳入 url,在後方的 .then 表示任務完成第一段後取得 resolve() 內的值,接下來就如同 jQuery Ajax 回傳後得處理方式一樣,。

1
let list = `<li>${item.SiteName} ${item.PublishTime} ${item.SiteName} ${item.UVI}</li>`

題外話:這一段則是 ES6 中的字串處理方式,用 ` 符號框住整個字串,再透過類似 jQuery 的 selector (${}) 就能帶入字串中的變數,取代過去使用“ “ + variable + “ “` 撰寫起來輕便許多。

錯誤回傳

1
2
3
4
5
6
7
getData(errorUrl) // 傳入錯誤的 url
.then((data)=>{ // then 接受回傳的值 (錯誤的狀況不會跑這段)
console.log(data);
})
.catch((response)=> { // 錯誤狀態的回傳
console.log('errorUrl:', response);
});

後面包含另一個 getData(errorUrl) 刻意傳入錯誤的連結使其產生錯誤,這時候的 .then 沒有辦法接受到資料,後方的 .catch 則可以接到由 reject() 回傳的訊息。

參考文件:https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Promise/all