Promise 現在已經被大部分瀏覽器所支援 (IE 以外),在處理非同步的操作是一大助力,最近在寫 Node.js 也不需要再仰賴其它套件就能夠直接處理非同步問題,以下就提供一個範例來介紹簡單的 Promise 的操作過程。
See the Pen ES6 Promise by Wcc723 (@Wcc723) on CodePen.
(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 回傳後得處理方式一樣,。
let list = `<li>${item.SiteName} ${item.PublishTime} ${item.SiteName} ${item.UVI}</li>`
題外話:這一段則是 ES6 中的字串處理方式,用 符號框住整個字串,再透過類似 jQuery 的 selector (
${}
) 就能帶入字串中的變數,取代過去使用 " " + variable + " "
撰寫起來輕便許多。
錯誤回傳
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