読者です 読者をやめる 読者になる 読者になる

Async Functions (async/await) チートシート

JavaScript
const promise = Promise.resolve(42);

async function a() {
  const result = await promise;
  console.log(result); // 42
};

a();

戻り値を返す場合

async function は Promise オブジェクトを返す。

const promise = Promise.resolve(42);

async function a() {
  const result = await promise;
  return result;
};

console.log(a()); // Promise { <pending> }
a().then(v => { console.log(v) }); // 42

Promise チートシート

JavaScript
const promise = new Promise((resolve, reject) => {
  resolve(42);
});

promise.then((v) => {
  console.log(v); // 42
}).catch((e) => {
  console.log(e);
});

エラー処理

const promise = new Promise((resolve, reject) => {
  reject(new Error('エラーだよ'));
});

promise.then((v) => {
  console.log(v);
}).catch((e) => {
  console.log(e); // Error: エラーだよ
});

Promise.resolve

与えられた値で resolve する Promise オブジェクトを返す。

Promise.resolve(42).then((v) => {
  console.log(v); // 42
});

Promise.reject

与えられた値で reject する Promise オブジェクトを返す。

Promise.reject(new Error('エラーだよ')).catch((e) => {
  console.log(e); // Error: エラーだよ
});

Promise.all

全ての Promise が resolve したときに resolve する Promise オブジェクトを返す。

const a = Promise.resolve('a');
const b = Promise.resolve('b');

Promise.all([a, b]).then((results) => {
  console.log(results); // [ 'a', 'b' ]
});

Promise.race

いずれかの Promise が完了した場合に完了する Promise オブジェクトを返す。

const a = Promise.resolve('a');
const b = Promise.resolve('b');

Promise.race([a, b]).then((result) => {
  console.log(result); // a
});

Node.js で Babel を使う

Node.js Babel JavaScript

Node.js v6 は ES2015 のほとんどの機能が使えるんだけど ES Modules (import/export) や Async Functions
 (async/await) が使いたくなったので Babel を導入することにした。

% yarn add --dev babel-cli babel-preset-latest babel-polyfill
% echo '{ "presets": ["latest"] }' > .babelrc

package.json にビルド用の npm-scripts を追加

{
  "scripts": {
    "build": "babel src -w -s inline -d lib",
  },
}

最初に読み込むファイルの先頭に以下の一行を追記

require("babel-polyfill");

ビルドを実行

% yarn run build

babel-preset-latest

babel-preset-es2015, babel-preset-es2017, babel-preset-es2017 にはそれぞれの年に策定された feature しか含まれていない。とりあえず何も考えずに全部載せにしたい場合は babel-preset-latest を使えばいい。

babel-polyfill

Async Functions
 (async/await) を使おうと思ったらエラー吐いた。このエラーを潰すために babel-polyfill を入れた。

ReferenceError: regeneratorRuntime is not defined

babel src -w -s inline -d lib

引数 説明
src コンパイル対象のディレクトリを指定
-w ファイルの更新を検知して再コンパイル
-s inline インライン Source Map を使う
-d lib アウトプットするディレクトリを指定

https://babeljs.io/docs/usage/cli/

環境

% babel --version
6.18.0 (babel-core 6.18.0)

% node -v
v6.9.1