Promise 是 ES6 用來處理非同步的一種方法,至於是處理什麼問題呢?
以 jQuery 來說 ajax 的非同步處理就有很多種,這就是第一點,非同步寫法不一致
接下來用 jQuery 的 ajax 搭配 random user 的 api 來舉例程式碼過巢的問題:
$.ajax({
url: url
}).done(function(res){
const seed = res.info.seed;
console.log(seed);
$.ajax({
url: `${url}?seed=${seed}`
}).done(function(res2){
console.log(res2);
});
});
上述的程式碼,在第一次抓取資料完成的時候,先撈取當筆資料的 seed,再把 seed 加上 url 來抓取同一筆資料
ps. 這個要閱讀 random user 的 api
而這個動作只有撈取兩次的資料,當要撈取無數筆的資料就會變成這樣:
$.ajax({
url: url
}).done(function(res){
const seed = res.info.seed;
console.log(seed);
$.ajax({
url: `${url}?seed=${seed}`
}).done(function(res2){
console.log(res2);
$.ajax({
...
}).done(function(){
$.ajax({
...
}).done(function(){
...
});
});
});
});
有沒有發現過巢的問題了? 何況還不易閱讀,而且如果某幾筆資料是要同時執行的時候,也無法。
Promise 的出現,就可以解決上述的問題,Promise 的文章 goolge 之後有很多種,這裡直接簡單扼要的說明Promise 在執行時會有一個等待期,之後就只會有兩種結果,要馬是成功(resolve),要馬是失敗(reject),成功的話就調用 .then() 失敗則是使用 .catch()