初探 async 與 await

前言

  async 是 JavaScript 的新標準，抽個空做個學習，在此做個紀錄。

內容

  async 是異步的意思，可以宣告異步 function 來完成異步執行，並且必須回傳 Promise 物件，而 await 是專門搭配 async function 使用的語法，範例如下

function resolveByTime(x, waitTime) {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve(x);
    }, waitTime);
  });
}


async function add1(x) {
  const a = await resolveByTime(20, 2000);
  const b = await resolveByTime(30, 2000);
  return a + b;
}

add1(20).then(v => {
  console.log(v);  // prints 70 after 4 seconds.
});
//
async function add2(x) {
  const a =  resolveByTime(20, 2000);
  const b =  resolveByTime(30, 7000);
  return x + await a + await b;
}
console.log('start');

add2(20).then(v => {
  console.log(v);  // prints 70 after 7 seconds.
});

resolveByTime() 是一個可以用輸入引數來決定 Promise() 的執行時間的 function ，並且回傳第一個引數作為結果，接著可以看到 add1() ，在開頭可以看到 async 的語法，宣告後就可已在該 fumction 裡使用 await 語法，await 使用在 function 之前，且該 function 必須回傳 Promise ， resolveByTime()  雖然回傳的結果是 Promise ，但搭配 await 使用時，回傳的結果會是 resolve() 的引數，以 resolveByTime() 來說，就是回傳第一個引數，所以第一個使用 await 可以解釋成等待 2 秒後回傳 20 ，接著又做了一次 await ，不過這次回傳的結果是 30 ，接著執行 add1() ，要注意執行時請當它是一個 Promise 來執行，所以可以直接喚起 then() ，接著又宣告了 add2() ，一樣是 async function ，這次的用法不太一樣，可以看到  resolveByTime() 前不加 await 了，而是在使用結果的變數前加 await ，有什麼差別呢? add1() 的用法第一個  resolveByTime() 在執行完前，第二個 resolveByTime() 不會被執行，所以 add1() 的執行時間是 4 秒 ，在 add2() 的 resolveByTime()  會被同時啟動，所以執行時間是 7 秒 ，最後在注意的是執行 add1() 與 add2() 的總共時間並不是 11 秒 ，而是 7 秒! add1() 執行後程式並不會停下來等待結果，而是馬上執行 add2()。

參考資料

[ developer.mozilla.org ] async function

 關於 Array.reduce() 

前言

  最近看到了 Array.reduce() ，抽空做個學習，在此做個紀錄。

內容

  Array.reduce() 會逐一取得每個陣列元素並做處理，但這跟 Array.forEach() 不是一樣嗎?先看看範例

const array1 = [1, 2, 3, 4];

//
const initialValue = 0;
const sumWithInitial = array1.reduce(
  (previousValue, currentValue) => previousValue + currentValue,
  initialValue
);

console.log(`sum:${sumWithInitial}`);//10
//
let sumByForEach = 0;
array1.forEach( function(value) {
  sumByForEach += value;
});

console.log(`sum use foreach:${sumByForEach}`);//10

Array..reduce() 的引數有兩個，第一個引數是個 funciton ，用來處理每個元素，但它的引數是先前的元素與現在的元素，第二個引數是初始值，最後範例用  Array.forEach() 來做一樣的是來比較差異性，差異是 Array.forEach() 的總和值是在外面給的，但 Array..reduce() 可以不用給，會自動產生，並且可以用 return 值來接收這個數值，差異就是少了一行來產生這個數值。

參考資料

[ developer.mozilla.org ] Array.prototype.reduce()

 關於 Promise 的 race()

前言

  在上次的 並列執行 Promise 中使用 Promise.all() 來並列執行 Promise ，查了一下有個很像的 function ，就是 Promise.race() ，就來做個學習，在此做個紀錄。

內容

  範例如下

function promise(num, time = 50) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      (num>0) ? resolve(`value:${num}, 成功`) : reject(`value:${num},失敗`);
    }, time);
  });
}
Promise.race([promise(1,3000), promise(2,500), promise(3, 1000)])
  .then(res => {
    console.log(res);
  })
  .catch(res =>{
    console.log(res);
  
  });
//value:2, 成功

Promise.race() 跟 Promise.all()  的用法很像，都是傳入多個 Promise ，但不一樣的地方是 Promise.race() 會在第一個發生 resolve() 或 reject() 的 Promise 發生後就進到 then() 或 catch() ，範例會回傳第二個結果是因為第二個最快完成，但其它的 Promise 還是會各自完成，只是不會進到 then() 或 catch() 了。

參考資料

[ 卡斯伯的 Blog ] JavaScript Promise 全介紹

相關文章與資料

並列執行 Promise

 並列執行 Promise

前言

  在先前的 初探 Promise 提過 Promise 的基本應用， Promise 總是一個使用完在到下一個，如果要同時使用 Promise 該如何做?在此把學習的過程做個紀錄。

內容

  範例如下

function promise(num, time = 50) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      (num>0) ? resolve(`value:${num}, 成功`) : reject(`value:${num},失敗`);
    }, time);
  });
}
Promise.all([promise(1), promise(2), promise(3, 300)])
  .then(res => {
    console.log(res);
  })
  .catch(res =>{
    console.log(res);
  
  });
//["value:1, 成功", "value:2, 成功", "value:3, 成功"]

要並列執行必須透過 Promise.all() ，只要將引數裡傳入裝有每個都是 Promise 的陣列就可以並列執行，接著就和一般的 Promise 一樣使用 then() 與 catch() 來接收，但回傳的引數有不同的意義，then() 的引數會是包含著每個 Promise 成功拾回傳值得陣列， catch() 這邊只能回傳第一個發生失敗的 Promise 回傳值，這點要注意。

參考資料

[ 卡斯伯的 Blog ] JavaScript Promise 全介紹

相關文章與資料

初探 Promise

 hasOwn() 與 hasOwnProperty() 的差異

前言

  JavaScript 的新標準裡有個 hasOwn() ，抽個空來做個學習，在此做個紀錄。

內容

  查了一下發現這個 funciton 跟舊有的 hasOwnProperty() 很有關係，是新標準用來替換舊有的，它們的差異可以參考範例。

  範例如下

let person = {
  hasOwnProperty: function() {
    return false;
  },
  age: 35
};
 
console.log( Object.hasOwn(person, 'age') ); // true
console.log( person.hasOwnProperty( 'age' ) ); // false

範例的'person'裡有一個 hasOwnProperty() ，這個 function 會在 person.hasOwnProperty() 時喚起造成覆蓋的現象，但是 hasOwn() 沒這個麻煩。

  根據 [ developer.mozilla.org ] Object.hasOwn() 裡的說明，這個新增的 function 就是要替代舊有的 hasOwnProperty() ，所以就直接替代即可。  

參考資料

[ stackoverflow.com ] Object.hasOwn() vs Object.prototype.hasOwnProperty()

[ developer.mozilla.org ] Object.hasOwn()