More than 5 years have passed since last update.

私が async/await、promise をちゃんと理解するまでのステップ１，２，３

Last updated at 2019-05-01Posted at 2019-04-27

これは何？

javascript の async/await を使いこなすために必要な事柄について、私なりに説明したものです。

書いてあること

ステップ１）await 使えば待ってくれる
- 必要最小限の async/await、及び、エラーの catch の話
ステップ２）promise というもの
- promise の中には「正常データ = resolve」と「エラー = reject」のいずれかを保管できるという話
- どうすれば、promise から、正常データ(resolve)を取り出せるか？
- どうすれば、promise から、エラー(reject)を取り出せるか？
- Promise.all の話
ステップ３）promiseを作る方法
- callbackスタイルの関数を、promiseスタイルとして使う方法
- setTimeout() を promiseスタイルにする
- async で promise を作ってみる
あと、参考にしたURLと、検証の為に作ったサンプルソースを付けてます。

ステップ１）await 使えば待ってくれる

http://.../get1 を取得した後、http://.../get2 を取得する。
つまり、１つ１つの処理を待ちます。（同時に動いたりしません）

async function xxx() {

  // このgetでデータ取得が完了するまで待ってから・・・
  const res1 = await axios.get('http://.../get1');
  console.log(res1);

  // 次のgetを開始する。
  const res2 = await axios.get('http://.../get2');
  console.log(res2);
}

もしも、await を書かなかったら、一瞬でこの関数の処理は終わってしまい console.log の出力は res1=Promise res2=Promise になってしまいます。（Promise の説明はステップ２を参照ください）
- つまり、値が Promise になってしまったときは、await のつけ忘れを疑えばいい。
await を使ったときは、関数名に async というおまじないが必要なので注意
- うっかり忘れると、async が無いと怒られます。素直に async を付けましょう。
- 実は async の本当の意味は、「この関数は、promise を返しますよ」という宣言なのですが、ひとまず＊おまじない＊と理解しておいて構わないです。

少し昔 (async/await が無かった時)は、then を使ってた

同じ処理を async/await を使わずに書いてみます。

function xxx() {
  axios.get('http://.../get1')
    .then((res1) => {
      // get1のデータが取得できたら、ここの処理開始
      console.log(res1);
      return(axios.get('http://.../get2'));
    })
    .then((res2) => {
      // get2のデータが取得できたら、ここの処理開始
      console.log(res2);
    });
}

async/await の記述の方が簡単ですね。
余談ですが、、、
- もっと昔は、callbackスタイルで非同期処理を行ってました。
- 今現在も、fs.read() などの多くの標準関数が、callbackスタイルです。
- 後で書きますが、callbackスタイルの関数も、簡単にpromiseスタイルに変換できるので、await も使えます。

async/await でエラーを扱う方法は？

正常処理は良いとして、エラーはどのように扱えばいいんでしょうか。
ここでは「getでエラー発生したとき、処理を中断して関数を抜ける」方法を考えます。

try/catch でエラーをとらえる

async/await を使っていても、特別な書き方にはなりません。
普通に try/catch が使えます。

async function xxx() {
  let res1;
  let res2;
  try {
    res1 = await axios.get('http://.../get1');
    res2 = await axios.get('http://.../get2');
  } catch(err) {
    console.log('get1 or get2 error'); //・・・どちらか一方でもエラー発生した場合
    return;
  }
  console.log(res1);
  console.log(res2);
}

もしも、get1、get2 で別々にエラーをとらえたいなら、それぞれに try/catch を書けばいいでしょう。

ステップ２）promise というもの

実は、axios.get(url) は promise を返してきます。
「え？急に何のこと言ってるの？」と思った人へ
- 実は「axios.get(url) は取得したデータが返ってきません」
- promise というモノが返ってくるんです。
- あとで詳しく書きますが、例えば「頭に await を付けて await axios.get(url) とすると、取得したデータが返ってきます」
promise の中には、「正常データ」と「エラー」のどちらかを保管できるようになっています。
- promise流に言うと「正常データ」は「resolve」、「エラー」は「reject」と呼びます。
余談ですが、、、
- ところで「既に、returnで正常データを、throwでエラーを返すという仕組みがあるにもかかわらず、なぜ、promiseにわざわざ、正常データとエラーを詰め込まなければならないのでしょうか？」
- promiseは、非同期処理の結果(正常データ、エラー)を、javascriptの言語仕様として、どう扱うか決めたものです。その成果として、さらに簡単に非同期を扱えるようになった、async/awaitの存在があります。
- つまり、promise ができたから、さらに進化して async/await が誕生したんです。
- 5/1追記。さらに興味のある方は、コメント欄の yuta0801 さんの書き込みや、「非同期処理 · JavaScriptの入門書 #jsprimer」を読むと、より理解が深まると思います。

どうすれば、promise から、正常データ(resolve)を取り出せるか？

２つ方法があります。
方法１）await をつける。
- 例えば ret = await axios.get(url) と書けば、正常データ(ret)が取り出せます。
方法２）promise の then メソッドを使う。
- 例えば axios.get(url).then(ret => { <retを使った処理> }) と書けば、正常データ(ret)が取り出せます。

どうすれば、promise から、エラー(reject)を取り出せるか？

２つ方法があります。
方法１）普通に try/catch を使う。
- try { <promiseから正常データを取り出す処理> } catch(err) { <エラー処理> }
方法２）promise の .catch メソッドを使う。
- <promiseから正常データを取り出す処理>.catch(err => { <エラー処理> })

例）await で正常データを取得して、try/catch でエラーを取り出す

先の「try/catch でエラーをとらえる」に書いた通りです。

例）await で正常データを取得して、promise の .catch でエラーを取り出す

回りくどいですが、まずは、私が最初にこの方法で書いたときの 間違ったコード を載せておきます。
といっても、promiseの使い方とかそういう次元ではなく、javascript そのものの理解度が足りずに間違って書いてしまったので、恥ずかしいミスなのですが。

async function xxx() {
  const res1 = await axios.get('http://.../get1')
    .catch((err) => {
      console.log('get1 error');
      return; // ・・・エラーだったら中断して関数を抜ける為のreturnの＊つもり＊だが、
    });
  console.log(res1); // ・・・実はこれ以降も実行される。res1=undefined になる。

  const res2 = await axios.get('http://.../get2');
    .catch((err) => {
      console.log('get1 error');
      return; // ・・・エラーだったら中断して関数を抜ける為のreturnの＊つもり＊
    });
  console.log(res2); // ・・・実はこれ以降も実行される。res2=undefined になる。
}

エラー発生を catch で受けて、xxx関数を抜ける為にreturnしたつもり ですが、この記述では 無名関数を抜けるだけで、xxx関数は抜けられません。
- 代替え案としては、throw new Error('error') を使えば、一気にxxx関数を抜けられます。

そもそも、非同期で動くことが出来る axios.get を処理を待って順次実行(同期実行)するのは、もったいないのでは？

ということで、複数の axios.get を同時に実行(非同期実行)して、全部の処理が完了するまで待ってみます。
- 例えば、１つの axios.get に１秒かかるとして、３つ実行した場合、、、
  - 同期実行：「axios.getを待つ → axios.getを待つ → axios.getを待つ」ので、計３秒かかります。
  - 非同期実行：「axios.getｘ3を同時に実行 → 全部終わるのを待つ」ので、計１秒で済みます。

async function xxx() {
  let res1;
  let res2;
  let res3;
  try {
    [res1, res2, res3] = await Promise.all([
      axios.get('http://.../get1').catch(e => { throw 'get1 error '+e.message}),
      axios.get('http://.../get2').catch(e => { throw 'get2 error '+e.message}),
      axios.get('http://.../get3').catch(e => { throw 'get3 error '+e.message}),
    ]);
  } catch(err) {
    console.log(err);
    return; // １つでもエラーになったら、関数を抜ける
  }

  // ３つ全てが正常データを取得できたとき、以下を実行
  console.log(res1);
  console.log(res2);
  console.log(res3);
}

Promise.all を使うことで、３つの axios.get を同時に実行開始し、３つとも完了するのを待つことが出来ます。
この例では、各 axios.get に catch を付けることで、どちらのエラーが発生したか判別できるように、エラーを書き換えています。
- しかしながら、単に、エラー検出するだけなら、外側の try/catch だけで十分です。

ステップ３）promiseを作る方法

callbackスタイルを promiseスタイルにする

promise が発明される以前、非同期と言えば callbackスタイルが一般的でした。
これらの関数を promise 化してみます。

const readFileAsync = util.promisify(fs.readFile);
text = await readFileAsync(path);

util.promisify を使うと、promiseスタイルの関数を得られます。
- 他にも bluebird などでも提供されています。

setTimeout() を promiseスタイルにする

例）msec後に、正常データ('ok')を返す promise

function sleep_ok(msec) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log('>>> sleep_ok() ---> resolve(ok)');
      resolve('ok');
    }, msec);
  });
}

例）msec後に、エラー(new Error('ng'))を返す promise

function sleep_ng(msec) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log('>>> sleep_ng() ---> reject(new Error(ng))');
      reject(new Error('ng'));
    }, msec);
  });
}

async で promise を作ってみる

「async は promise を返す」ということは、「async で promise を作れる」ということです。

「async の return」は「promise の resolve」と等価

async function async_ok() {
  console.log('>>> async_ok() ---> return(ok)');
  return 'ok'; // promise の resolve と等価
}

「async の throw」は「promise の reject」と等価

async function async_ng() {
  console.log('>>> async_ng() ---> throw new Error(ng)');
  throw new Error('ng'); // promise の reject と等価
}

参照したURL

javascript の非同期処理について、学ぶにあたって参照させて頂いたURLです。皆さんありがとうございます。
コールバックスタイルの非同期処理をpromise化するモジュールの話
- util.promisify()でcallbackスタイルの関数をpromise化 - Qiita https://qiita.com/t-okushima/items/fbca67541003576997cc
標準のpromiseより、さらに高機能なものの話
- PromiseとQとBluebird - Qiita https://qiita.com/kamijin_fanta/items/21a061a00575f0a357c6
Array の map、filter で async/await を使ったときに、うまく動かすことが出来ず、参考にさせてもらいました。
- Array 操作関数の callback に async/await な関数を指定したい - Qiita https://qiita.com/janus_wel/items/1dc491d866f49af76e98
コンパクトにまとめられた説明です。async の正体を教えてもらいました。
- async/await 入門（JavaScript） - Qiita https://qiita.com/soarflat/items/1a9613e023200bbebcb3
長文ですが、とても詳しい説明です。このレベルの情報がネットで簡単に見られるのは助かります。
- 非同期処理 · JavaScriptの入門書 #jsprimer https://jsprimer.net/basic/async/

参考）サンプルソース

ここまでの説明の為に作ったサンプルソースです。
node.js v10.15.3 を使いました。

run.sh

set -x

:
: --------------------------------
: async/await の例
: --------------------------------
node --experimental-modules promise.mjs sample11
node --experimental-modules promise.mjs sample12
node --experimental-modules promise.mjs sample13
node --experimental-modules promise.mjs sample14
node --experimental-modules promise.mjs sample15

:
: --------------------------------
: promise の then/catch の例
: --------------------------------
node --experimental-modules promise.mjs sample21
node --experimental-modules promise.mjs sample24
node --experimental-modules promise.mjs sample25

:
: --------------------------------
: promise の resolve/reject は
: async の return/throw と等価である
: --------------------------------
node --experimental-modules promise.mjs sample31
node --experimental-modules promise.mjs sample32

:
: --------------------------------
: Promise.all の例
: --------------------------------
node --experimental-modules promise.mjs sample41
node --experimental-modules promise.mjs sample42
node --experimental-modules promise.mjs sample43
node --experimental-modules promise.mjs sample44
node --experimental-modules promise.mjs sample45

myutil.mjs

export function log(...msg) {
  const dt = new Date();
  const ms = dt.getMinutes() + ':' + dt.getSeconds();
  console.log(ms, ...msg);
}

export function sleep_ok(msec) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      log('>>> sleep_ok() ---> resolve(ok)');
      resolve('ok');
    }, msec);
  });
}

export function sleep_ng(msec) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      log('>>> sleep_ng() ---> reject(new Error(ng))');
      reject(new Error('ng'));
    }, msec);
  });
}

// msec後、consoleにlogmsgを出力して、`resolve(ret)` する。
// ただし、retがErrorのとき、`rejecti(ret)` する。
export function sleep(msec, logmsg, ret) {
  log('>>> sleep() ' + logmsg + ' in.');
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (ret instanceof Error) {
        log('>>> sleep() ' + logmsg + ' out reject()');
        reject(ret);  // Error のとき reject
      } else {
        log('>>> sleep() ' + logmsg + ' out resolve()');
        resolve(ret);
      }
    }, msec);
  });
}

promise.mjs

import {log, sleep_ok, sleep_ng} from './myutil.mjs'

async function sample11() {
  console.log('// await で待つ');
  log('-- 1');
  log(await sleep_ok(1000));
  log('-- 2');
  log(await sleep_ok(1000));
  log('-- 3');
}

function sample12() {
  console.log('// もしも、await をつけなかったら？');
  log('-- 1');
  log(sleep_ok(1000));
  log('-- 2');
  log(sleep_ok(1000));
  log('-- 3');
}

async function sample13() {
  console.log('// エラーだったら？(rejectされたら？)');
  log('-- 1');
  log(await sleep_ok(1000));
  log('-- 2');
  log(await sleep_ng(1000));
  log('-- ここには到達しない');
}

async function sample14() {
  console.log('// エラーをtry/catchしてみる');
  log('-- 1');
  log(await sleep_ok(1000));
  log('-- 2');
  try {
    log(await sleep_ng(1000));
  } catch (e) {
    log('-- 3 try/catch() e.message=' + e.message);
  }
  log('-- 4');
}

async function sample15() {
  console.log('// エラー発生で即関数を抜ける');
  try {
    log('-- 1');
    log(await sleep_ok(1000));
    log('-- 2');
    log(await sleep_ng(1000));
    log('-- ここには到達しない');
  } catch (e) {
    log('-- 3 try/catch() e.message=' + e.message);
    log('-- 4 return');
    return;
  }
  log('-- ここには到達しない');
}

function sample21() {
  console.log('// sample11 を promiseのthen で記述してみる');
  log('-- 1');
  sleep_ok(1000)
    .then((ret) => {
      log(ret);
      log('-- 3');
      return(sleep_ok(1000));
    })
    .then((ret) => {
      log(ret);
      log('-- 4');
    });
  log('-- 2 これが2になる。4の次にはならないので注意');
}

function sample24() {
  console.log('// sample14 を promiseのthen/catch で記述してみる');
  log('-- 1');
  sleep_ok(1000)
    .then((ret) => {
      log(ret);
      log('-- 3');
      return(sleep_ng(1000));
    })
    .then((ret) => {
      log(ret);
      log('-- ここには到達しない');
    })
    .catch((err) => {
      log('--4 catch() err.message=' + err.message);
    });
  log('-- 2 これが2になる。4の次にはならないので注意');
}

function sample25() {
  console.log('// sample15 を promiseのthen/catch で記述してみる');
  log('-- 1');
  sleep_ok(1000)
    .then((ret) => {
      log(ret);
      log('-- 3');
      return(sleep_ng(1000));
    })
    .then((ret) => {
      log(ret);
      log('-- ここには到達しない');
    })
    .catch((err) => {
      log('--4 catch() err.message=' + err.message);
      log('--5 ここにreturnと書いても、親関数を抜ける意味にはならないので注意');
      return;
    });
  log('-- 2 ついつい「5でreturnしているので、ここには到達しない」と考えてしまうが、そうはならないので注意');
}

async function async_ok() {
  log('>>> async_ok() ---> return(ok)');
  return 'ok'; // promise の resolve と等価
}

async function async_ng() {
  log('>>> async_ng() ---> throw new Error(ng)');
  throw new Error('ng'); // promise の reject と等価
}

async function sample31() {
  console.log('// 「promise の resolve」は「async の return」と等価');
  log('-- 1');
  log(await async_ok());
  log('-- 2');
  log(await sleep_ok(0));
  log('-- 3');
}

async function sample32() {
  console.log('// 「promise の reject」は「async の throw」と等価');
  log('-- 1');
  try {
    await async_ng();
  } catch(err) {
    log('-- 2 catch() err.message=' + err.message);
  }
  log('-- 3');
  try {
    await sleep_ng(0);
  } catch(err) {
    log('-- 4 catch() err.message=' + err.message);
  }
  log('-- 5');
}

async function sample41() {
  console.log('// Promise.all で待つ');
  log('-- 1');
  let ret = await Promise.all([
    sleep_ok(1000),
    sleep_ok(2000)
  ]);
  log(ret);
  log('-- 2');
}
  
async function sample42() {
  console.log('// Promise.all で、ngがあるとき');
  log('-- 1');
  let ret = await Promise.all([
    sleep_ok(1000),
    sleep_ng(2000)
  ]);
  log('-- ここには到達しない');
  log(ret);
}
 
async function sample43() {
  console.log('// Promise.all で try/catch');
  log('-- 1');
  let ret;
  try {
    ret = await Promise.all([
      sleep_ok(1000),
      sleep_ng(2000)
    ]);
  } catch(err) { // どちらの処理のエラーかはわからない。(errの戻り値を工夫する必要あり)
    log('-- 2 catch() err.message=' + err.message);
    return; // ここで処理抜ける
  }
  log('-- ここには到達しない');
  log(ret);
}
 
async function sample44() {
  console.log('// Promise.all の try/catch で promise を直接見れば、どれのエラーか判別できる？');
  log('-- 1');
  let p = Promise.all([
    sleep_ok(1000),
    sleep_ng(2000)
  ]);
  let ret;
  try {
    ret = await p;
  } catch(err) {
    log('-- 2 catch() err.message=' + err.message);
    log('p=', p); // 判別できない
    return; // ここで処理抜ける
  }
  log('-- ここには到達しない');
  log(ret);
}
 
async function sample45() {
  console.log('// 個々のpromiseにcatchをつけ、ユニークなthrowとすることで誰がエラーになったか判別する');
  log('-- 1');
  let ret;
  try {
    ret = await Promise.all([
      sleep_ok(1000).catch(err => { throw new Error('sleep_ok(1000)') }),
      sleep_ng(2000).catch(err => { throw new Error('sleep_ng(2000)') })
    ]);
  } catch(err) {
    log('-- 2 catch() err.message=' + err.message);
    return; // ここで処理抜ける
  }
  log('-- ここには到達しない');
  log(ret);
}
 

const funcname = process.argv[2] + '()';
console.log('');
console.log('### ' + funcname);
eval(funcname);

実行結果

ubuntu@ubuntu201809:~/20190427node$ ./run.sh |& cat -n
     1	++ :
     2	++ : --------------------------------
     3	++ : async/await の例
     4	++ : --------------------------------
     5	++ node --experimental-modules promise.mjs sample11
     6	(node:11925) ExperimentalWarning: The ESM module loader is experimental.
     7	
     8	### sample11()
     9	// await で待つ
    10	5:23 -- 1
    11	5:24 >>> sleep_ok() ---> resolve(ok)
    12	5:24 ok
    13	5:24 -- 2
    14	5:25 >>> sleep_ok() ---> resolve(ok)
    15	5:25 ok
    16	5:25 -- 3
    17	++ node --experimental-modules promise.mjs sample12
    18	(node:11936) ExperimentalWarning: The ESM module loader is experimental.
    19	
    20	### sample12()
    21	// もしも、await をつけなかったら？
    22	5:25 -- 1
    23	5:25 Promise { <pending> }
    24	5:25 -- 2
    25	5:25 Promise { <pending> }
    26	5:25 -- 3
    27	5:26 >>> sleep_ok() ---> resolve(ok)
    28	5:26 >>> sleep_ok() ---> resolve(ok)
    29	++ node --experimental-modules promise.mjs sample13
    30	(node:11947) ExperimentalWarning: The ESM module loader is experimental.
    31	
    32	### sample13()
    33	// エラーだったら？(rejectされたら？)
    34	5:27 -- 1
    35	5:28 >>> sleep_ok() ---> resolve(ok)
    36	5:28 ok
    37	5:28 -- 2
    38	5:29 >>> sleep_ng() ---> reject(new Error(ng))
    39	(node:11947) UnhandledPromiseRejectionWarning: Error: ng
    40	    at Timeout.setTimeout [as _onTimeout] (file:///home/ubuntu/20190427node/myutil.mjs:20:14)
    41	    at ontimeout (timers.js:436:11)
    42	    at tryOnTimeout (timers.js:300:5)
    43	    at listOnTimeout (timers.js:263:5)
    44	    at Timer.processTimers (timers.js:223:10)
    45	(node:11947) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
    46	(node:11947) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
    47	++ node --experimental-modules promise.mjs sample14
    48	(node:11958) ExperimentalWarning: The ESM module loader is experimental.
    49	
    50	### sample14()
    51	// エラーをtry/catchしてみる
    52	5:29 -- 1
    53	5:30 >>> sleep_ok() ---> resolve(ok)
    54	5:30 ok
    55	5:30 -- 2
    56	5:31 >>> sleep_ng() ---> reject(new Error(ng))
    57	5:31 -- 3 try/catch() e.message=ng
    58	5:31 -- 4
    59	++ node --experimental-modules promise.mjs sample15
    60	(node:11969) ExperimentalWarning: The ESM module loader is experimental.
    61	
    62	### sample15()
    63	// エラー発生で即関数を抜ける
    64	5:31 -- 1
    65	5:32 >>> sleep_ok() ---> resolve(ok)
    66	5:32 ok
    67	5:32 -- 2
    68	5:33 >>> sleep_ng() ---> reject(new Error(ng))
    69	5:33 -- 3 try/catch() e.message=ng
    70	5:33 -- 4 return
    71	++ :
    72	++ : --------------------------------
    73	++ : promise の then/catch の例
    74	++ : --------------------------------
    75	++ node --experimental-modules promise.mjs sample21
    76	(node:11980) ExperimentalWarning: The ESM module loader is experimental.
    77	
    78	### sample21()
    79	// sample11 を promiseのthen で記述してみる
    80	5:33 -- 1
    81	5:33 -- 2 これが2になる。4の次にはならないので注意
    82	5:34 >>> sleep_ok() ---> resolve(ok)
    83	5:34 ok
    84	5:34 -- 3
    85	5:35 >>> sleep_ok() ---> resolve(ok)
    86	5:35 ok
    87	5:35 -- 4
    88	++ node --experimental-modules promise.mjs sample24
    89	(node:11991) ExperimentalWarning: The ESM module loader is experimental.
    90	
    91	### sample24()
    92	// sample14 を promiseのthen/catch で記述してみる
    93	5:35 -- 1
    94	5:35 -- 2 これが2になる。4の次にはならないので注意
    95	5:36 >>> sleep_ok() ---> resolve(ok)
    96	5:36 ok
    97	5:36 -- 3
    98	5:37 >>> sleep_ng() ---> reject(new Error(ng))
    99	5:37 --4 catch() err.message=ng
   100	++ node --experimental-modules promise.mjs sample25
   101	(node:12002) ExperimentalWarning: The ESM module loader is experimental.
   102	
   103	### sample25()
   104	// sample15 を promiseのthen/catch で記述してみる
   105	5:37 -- 1
   106	5:37 -- 2 ついつい「5でreturnしているので、ここには到達しない」と考えてしまうが、そうはならないので注意
   107	5:38 >>> sleep_ok() ---> resolve(ok)
   108	5:38 ok
   109	5:38 -- 3
   110	5:39 >>> sleep_ng() ---> reject(new Error(ng))
   111	5:39 --4 catch() err.message=ng
   112	5:39 --5 ここにreturnと書いても、親関数を抜ける意味にはならないので注意
   113	++ :
   114	++ : --------------------------------
   115	++ : promise の resolve/reject は
   116	++ : async の return/throw と等価である
   117	++ : --------------------------------
   118	++ node --experimental-modules promise.mjs sample31
   119	(node:12013) ExperimentalWarning: The ESM module loader is experimental.
   120	
   121	### sample31()
   122	// 「promise の resolve」は「async の return」と等価
   123	5:39 -- 1
   124	5:39 >>> async_ok() ---> return(ok)
   125	5:39 ok
   126	5:39 -- 2
   127	5:39 >>> sleep_ok() ---> resolve(ok)
   128	5:39 ok
   129	5:39 -- 3
   130	++ node --experimental-modules promise.mjs sample32
   131	(node:12024) ExperimentalWarning: The ESM module loader is experimental.
   132	
   133	### sample32()
   134	// 「promise の reject」は「async の throw」と等価
   135	5:40 -- 1
   136	5:40 >>> async_ng() ---> throw new Error(ng)
   137	5:40 -- 2 catch() err.message=ng
   138	5:40 -- 3
   139	5:40 >>> sleep_ng() ---> reject(new Error(ng))
   140	5:40 -- 4 catch() err.message=ng
   141	5:40 -- 5
   142	++ :
   143	++ : --------------------------------
   144	++ : Promise.all の例
   145	++ : --------------------------------
   146	++ node --experimental-modules promise.mjs sample41
   147	(node:12035) ExperimentalWarning: The ESM module loader is experimental.
   148	
   149	### sample41()
   150	// Promise.all で待つ
   151	5:40 -- 1
   152	5:41 >>> sleep_ok() ---> resolve(ok)
   153	5:42 >>> sleep_ok() ---> resolve(ok)
   154	5:42 [ 'ok', 'ok' ]
   155	5:42 -- 2
   156	++ node --experimental-modules promise.mjs sample42
   157	(node:12046) ExperimentalWarning: The ESM module loader is experimental.
   158	
   159	### sample42()
   160	// Promise.all で、ngがあるとき
   161	5:42 -- 1
   162	5:43 >>> sleep_ok() ---> resolve(ok)
   163	5:44 >>> sleep_ng() ---> reject(new Error(ng))
   164	(node:12046) UnhandledPromiseRejectionWarning: Error: ng
   165	    at Timeout.setTimeout [as _onTimeout] (file:///home/ubuntu/20190427node/myutil.mjs:20:14)
   166	    at ontimeout (timers.js:436:11)
   167	    at tryOnTimeout (timers.js:300:5)
   168	    at listOnTimeout (timers.js:263:5)
   169	    at Timer.processTimers (timers.js:223:10)
   170	(node:12046) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
   171	(node:12046) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
   172	++ node --experimental-modules promise.mjs sample43
   173	(node:12057) ExperimentalWarning: The ESM module loader is experimental.
   174	
   175	### sample43()
   176	// Promise.all で try/catch
   177	5:44 -- 1
   178	5:45 >>> sleep_ok() ---> resolve(ok)
   179	5:46 >>> sleep_ng() ---> reject(new Error(ng))
   180	5:46 -- 2 catch() err.message=ng
   181	++ node --experimental-modules promise.mjs sample44
   182	(node:12069) ExperimentalWarning: The ESM module loader is experimental.
   183	
   184	### sample44()
   185	// Promise.all の try/catch で promise を直接見れば、どれのエラーか判別できる？
   186	5:46 -- 1
   187	5:47 >>> sleep_ok() ---> resolve(ok)
   188	5:48 >>> sleep_ng() ---> reject(new Error(ng))
   189	5:48 -- 2 catch() err.message=ng
   190	5:48 p= Promise {
   191	  <rejected> Error: ng
   192	      at Timeout.setTimeout [as _onTimeout] (file:///home/ubuntu/20190427node/myutil.mjs:20:14)
   193	      at ontimeout (timers.js:436:11)
   194	      at tryOnTimeout (timers.js:300:5)
   195	      at listOnTimeout (timers.js:263:5)
   196	      at Timer.processTimers (timers.js:223:10) }
   197	++ node --experimental-modules promise.mjs sample45
   198	(node:12080) ExperimentalWarning: The ESM module loader is experimental.
   199	
   200	### sample45()
   201	// 個々のpromiseにcatchをつけ、ユニークなthrowとすることで誰がエラーになったか判別する
   202	5:48 -- 1
   203	5:49 >>> sleep_ok() ---> resolve(ok)
   204	5:50 >>> sleep_ng() ---> reject(new Error(ng))
   205	5:50 -- 2 catch() err.message=sleep_ng(2000)
ubuntu@ubuntu201809:~/20190427node$

626

629

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

私が async/await、promise をちゃんと理解するまでのステップ１，２，３

これは何？

書いてあること

ステップ１）await 使えば待ってくれる

少し昔 (async/await が無かった時)は、then を使ってた

async/await で エラーを扱う方法は？

try/catch でエラーをとらえる

ステップ２）promise というもの

どうすれば、promise から、正常データ(resolve)を取り出せるか？

どうすれば、promise から、エラー(reject)を取り出せるか？

例）await で正常データを取得して、try/catch でエラーを取り出す

例）await で正常データを取得して、promise の .catch でエラーを取り出す

そもそも、非同期で動くことが出来る axios.get を処理を待って順次実行(同期実行)するのは、もったいないのでは？

ステップ３）promiseを作る方法

callbackスタイル を promiseスタイルにする

setTimeout() を promiseスタイルにする

例）msec後に、正常データ('ok')を返す promise

例）msec後に、エラー(new Error('ng'))を返す promise

async で promise を作ってみる

「async の return」は「promise の resolve」と等価

「async の throw」は「promise の reject」と等価

参照したURL

参考）サンプルソース

run.sh

myutil.mjs

promise.mjs

実行結果

async/await でエラーを扱う方法は？

callbackスタイルを promiseスタイルにする