JavaScript基礎（非同期処理編）

概要

UdemyでJavaScriptを勉強した時のメモ

Promise構文

非同期処理をより簡単に書けるようにするためのオブジェクト

new Promise(function(resolve, reject){
  // ① ここに記載の処理が実行される
  ...
  // ② 処理が終了したら、resolve(正常系)またはreject(異常系)関数を呼ぶ
  resolve();
}).then(function(){
  // ③-1 resolve()が呼ばれたときに実行される処理
  ...
}).catch(function(){
  // ③-2 reject()が呼ばれたときに実行される処理
  ...
}).finally(function(){
  // ④ resolve、rejectどちらが呼ばれた場合でも最後に実行される処理
  ...
})

thenからcatchに処理を移したい場合

new Promise(function(resolve, reject){
  resolve();
}).then(function(){
throw new Error();
}).catch(function(){

})

処理のチェーン

new Promise(function(resolve, reject){
  resolve();
}).then(function(){
  // resolve()は記載不要
}).then(function(){

})

2つ目以降のthenに引数を渡したい場合

new Promise(function(resolve, reject){
  resolve("Hello");
}).then(function(data){
  return "data
}).then(function(){
  console.log(data);
})

並列処理

const a = new Promise(function (resolve, reject) {
  console.log("a");
  resolve("a");
});
const b = new Promise(function (resolve, reject) {
  console.log("b");
  resolve("b");
});
const c = new Promise(function (resolve, reject) {
  console.log("c");
  resolve("c");
});

// 引数のPromiseを非同期で実行する
// そのため、必ずしもコンソールの表示がa→b→cとなるとは限らない
Promise.all([a, b, c]).then(function (value) {
  console.log(value); 
  // a,b,cの配列が表示される
});

MacroTasksとMicroTasks

どちらもタスクの待ち行列を管理するキュー
Macrotasksはタスクキューと呼ばれ、Microtasksはジョブキューと呼ばれる
Macrotasksにタスクを登録する関数として代表的なものは、setTimeoutやsetInterval
Microtasksにタスクを登録する関数として代表的なものはPromiseのthenメソッド
タスクキューにもジョブキューにもタスクが登録されている場合、ジョブキューにあるタスクが優先して実行される
ジョブキューにあるタスクが全て実行された後、タスクキューに登録されているタスクが実行される
タスクキューに登録されているタスクが1つ終わる度に、ジョブキューにタスクが登録されていないか確認し、登録されていればジョブキューを優先して実行する

// ① タスクキューに追加
setTimeout(function task1() {
  console.log('task1');
});
      
new Promise(function promise(resolve) {
  // ② 処理実行 
  console.log('promise');
  resolve();
}).then(function job1() {
  // ジョブキューに追加
  console.log('job1');
});
      
// ③ 処理実行
console.log('global end');
// ④ グローバルコンテキストが終了したため、まずはマイクロキューにあるタスク（console.log('task1');）が実行
// ⑤　ジョブキューのタスクを実行（console.log('job1');）

async/await

Promise構文をより直観的に書けるようにしたもの（シンタックスシュガー）
具体的には、Promiseを複数のthenで繋げる処理を書く時に便利
まずは、async/awaitを使わない書き方

// fetchで指定したURLのデータ（JSON）を受け取り、戻り値としてPromiseを受け取る
fetch('http://example.com/movies.json')
  .then(response => response.json())  // thenに即時関数を定義 .json()の戻り値もPromiseのため、さらにthenで繋げることが可能
  .then(data => console.log(data));

これをaync/awaitに書き換える

async function fetchMovieInfo(){
  const response =  await fetch('http://example.com/movies.json');
  const data = await response.json();
  console.log(data);
}
fetchMovieInfo();

awaitと書くことで、thenのように、Promiseの結果を待つようになる
内部でawaitを使っている関数にはasyncと付ける必要がある
async/awaitは関数内でしか使えない

目次

概要