[Javascript] 學習 Promise

Posted in :

2019-12-12

隨手研究一下 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 的函式。