[Javascript] 學習 Promise

隨手研究一下 recaptcha 的 javascript ,發現一個沒學過的物件 Promise,Google 來學習一下。我服用的是下列這篇文章,講解的很詳細:

你懂 JavaScript 嗎?#24 Promise
https://cythilya.github.io/2018/10/31/promise/

心得,網路上的神人真是多。學海無涯。


如果你也看完上面的文章,首先我遇到第一個「恐龍時代」的範例就看不懂了,還好,在程式多處加入log() 就看懂了,增加超多 log() 的範例:

function fetchA(cb) {
  console.log("do A job");

  setTimeout(function() { // 模擬冗長運算
  	console.log("return A job");
    return cb(1);
  }, 3000);
}

function fetchB(cb) {
  console.log("do B job");
  
  setTimeout(function() { // 模擬冗長運算
  	console.log("return B job");
    return cb(2);
  }, 1000);
}

function add(getX, getY, cb) {
  var x, y;

  console.log("push getX()");
  getX(function(xVal) {
	console.log("do function xVal");
    x = xVal; // 得到 x
    y && cb(x, y); // 若 y 也取到了,就執行加法運算
	console.log("finish function xVal");
  });

  console.log("push getY()");
  getY(function(yVal) {
	console.log("do function yVal");
    y = yVal; // 得到 y
    x && cb(x, y); // 若 x 也取到了,就執行加法運算
	console.log("finish function yVal");
  });
}

add(fetchA, fetchB, function(a, b) {
  console.log(a + b); // 加法運算,印出相加結果
});

執行結果:

> "push getX()"
> "do A job"
> "push getY()"
> "do B job"
> "return B job"
> "do function yVal"
> "finish function yVal"
> "return A job"
> "do function xVal"
> 3
> "finish function xVal"

似乎有沒有看懂古時候的寫法,和Promise 物件的用法都沒什麼關係,呵呵。


相關文章:

Promise
https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Promise

Promise 物件代表一個即將完成、或失敗的非同步操作,以及它所產生的值。

此條目為介紹 Promise 建構式。要瞭解 Promise 相關使用方式,請先參考使用 Promise。Promise 建構式主要用於包裹尚未支援 Promise 的函式。

相關文章

寫留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *