iT邦幫忙

2

JavaScript ES6 - Promise

Promise 是 ES6 用來處理非同步的一種方法,至於是處理什麼問題呢?

  1. 非同步寫法不一致
  2. 非同步程式碼過巢
  3. 無法同時執行

jQuery 來說 ajax 的非同步處理就有很多種,這就是第一點,非同步寫法不一致
接下來用 jQueryajax 搭配 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()


尚未有邦友留言

立即登入留言