JSの非同期処理の歴史、コールバック関数(ES5以前)→Promise(ES6)→async/await(ES8)の違いについて

前回の続き

JSの非同期関数とコールバック関数とは？この場合はコールバック関数って名前より、後処理関数って方が分かりやすいな…。

参考URL
https://sbfl.net/blog/2016/07/13/simplifying-async-code-with-promise-and-async-await/

注意：
XMLHttpRequest()は、サーバサイドのnode.js(コマンドライン)では使えないので、ブラウザのF12押してディベロッパーツールのコンソールにコピペして実行する。
最後のサンプルみたいにrequest関数で実装するのが正解だな。

1, コールバック関数を使わないと、非同期関数をうまく使えない

// サーバのa.txtを非同期関数で読み込む
const xhr = new XMLHttpRequest();
xhr.open('GET', 'http://localhost/a.txt');
xhr.send();
// 非同期関数が終わってない状態なのでエラー
console.log(xhr.responseText);

// サーバのa.txtを非同期関数で読み込む

const xhr = new XMLHttpRequest();

xhr.open('GET', 'http://localhost/a.txt');

xhr.send();

// 非同期関数が終わってない状態なのでエラー

console.log(xhr.responseText);

2, 非同期関数に、コールバック関数を渡して完了してから処理を行えばOK！

const xhr = new XMLHttpRequest();
xhr.open('GET', 'http://localhost/a.txt');
// addEventListenerは非同期関数
xhr.addEventListener('load', (event) => console.log(xhr.responseText));
xhr.send();

const xhr = new XMLHttpRequest();

xhr.open('GET', 'http://localhost/a.txt');

// addEventListenerは非同期関数

xhr.addEventListener('load', (event) => console.log(xhr.responseText));

xhr.send();

3, 非同期関数＋コールバック関数が沢山だとネストがヒドい！(コールバック地獄)

// サーバのa.txt -> b.txt -> c.txtの順で読み込んでいく
const xhr = new XMLHttpRequest();
xhr.open('GET', 'http://localhost/a.txt');
xhr.addEventListener('load', (event) => {
		console.log(xhr.responseText)
    const xhr2 = new XMLHttpRequest();
    xhr2.open('GET', 'http://localhost/b.txt');
    xhr2.addEventListener('load', (event) => {
				console.log(xhr2.responseText)
        const xhr3 = new XMLHttpRequest();
        xhr3.open('GET', 'http://localhost/c.txt');
        xhr3.addEventListener('load', (event) => {		
					console.log(xhr3.responseText)
				});
        xhr3.send();
    });
    xhr2.send();
});
xhr.send();

// サーバのa.txt -> b.txt -> c.txtの順で読み込んでいく

const xhr = new XMLHttpRequest();

xhr.open('GET', 'http://localhost/a.txt');

xhr.addEventListener('load', (event) => {

console.log(xhr.responseText)

const xhr2 = new XMLHttpRequest();

xhr2.open('GET', 'http://localhost/b.txt');

xhr2.addEventListener('load', (event) => {

console.log(xhr2.responseText)

const xhr3 = new XMLHttpRequest();

xhr3.open('GET', 'http://localhost/c.txt');

xhr3.addEventListener('load', (event) => {

console.log(xhr3.responseText)

});

xhr3.send();

});

xhr2.send();

});

xhr.send();

3, Promise(プロミス)とは何か？基本文法は、こんな感じ

// 最初にPromiseオブジェクトを生成
const promise = new Promise(
  // 正常orエラー終了時の関数名を決める
  (ok, ng) => {
      // 適当な確率でエラーを起こす
      if(Math.random() > 0.5 ){
        //...非同期な処理を行う。
        ok('正常終了'); // 正常終了関数
      }else{
        // エラーで異常終了関数
        ng('エラーです！'); 
      }
  }
);

// 非同期処理が完了したら、thenメソッドがコールされる
promise.then((result) => 
  console.log(result)
// エラー処理  
).catch((e) => 
  console.log(e)
);

// 最初にPromiseオブジェクトを生成

const promise = new Promise(

// 正常orエラー終了時の関数名を決める

(ok, ng) => {

// 適当な確率でエラーを起こす

if(Math.random() > 0.5 ){

//...非同期な処理を行う。

ok('正常終了'); // 正常終了関数

}else{

// エラーで異常終了関数

ng('エラーです！');

}

);

// 非同期処理が完了したら、thenメソッドがコールされる

promise.then((result) =>

console.log(result)

// エラー処理

).catch((e) =>

console.log(e)

);

4, 非同期処理のコールバック地獄を解消するPromise(プロミス)で記述する。
ネストが深くならず、関数化されてて良い感じ！

// ファイルのオープン関数
function openFile(url){
  // Promiseオブジェクト生成
  const promise_obj = new Promise((ok, ng) =>{
    // HTML通信オブジェクト生成
    const xhr = new XMLHttpRequest();
    // メソッドはGET
    xhr.open('GET', url);
    // loadが完了したら、内容をコンソールに表示して正常終了
    xhr.addEventListener('load', (e) => {
      console.log(xhr.responseText)
      ok(xhr)
    });
    // サーバへ送信
    xhr.send();
  });
  // 次のthenメソッド用にreturn
  return promise_obj;
}


// サーバのa.txt -> b.txt -> c.txtの順で読み込んでいく
openFile('http://localhost/a.txt')
  .then((xhr) => openFile('http://localhost/b.txt'))
  .then((xhr) => openFile('http://localhost/c.txt'))

/* こういう配列的な書き方でもOK
const promise = Promise.all([openFile('http://localhost/a.txt'),
                             openFile('http://localhost/b.txt'),
                             openFile('http://localhost/c.txt')]);
*/

// ファイルのオープン関数

function openFile(url){

// Promiseオブジェクト生成

const promise_obj = new Promise((ok, ng) =>{

// HTML通信オブジェクト生成

const xhr = new XMLHttpRequest();

// メソッドはGET

xhr.open('GET', url);

// loadが完了したら、内容をコンソールに表示して正常終了

xhr.addEventListener('load', (e) => {

console.log(xhr.responseText)

ok(xhr)

});

// サーバへ送信

xhr.send();

});

// 次のthenメソッド用にreturn

return promise_obj;

}

// サーバのa.txt -> b.txt -> c.txtの順で読み込んでいく

openFile('http://localhost/a.txt')

.then((xhr) => openFile('http://localhost/b.txt'))

.then((xhr) => openFile('http://localhost/c.txt'))

/* こういう配列的な書き方でもOK

const promise = Promise.all([openFile('http://localhost/a.txt'),

openFile('http://localhost/b.txt'),

openFile('http://localhost/c.txt')]);

5, ES8(ECMAScript2017)では、Promiseの糖衣構文(syntax sugar=シンプルで分かりやすい書き方)のasync/awaitが登場した！
a, Promiseオブジェクトを返す非同期関数の前には、awaitをつける
b, awaitを使うには、async function内でないと駄目！

// URLリクエストするパッケージ
const request = require("request");

// Promiseを返す非同期関数
function openFile(filename){
    // urlとメソッドが決定
    const param = {
        url: "http://localhost/" + filename,
        method: "GET"
    }

    // 返り値はPromiseオブジェクト
    return new Promise((ok, ng)=>{
        // 非同期関数のrequestで指定されたURLへアクセス
        request(param, function (error, response, body) {
            if(error){
                ng("ページを取得できませんでした");
            }else{
                console.log(body);
                ok("取得できました");
            }
        })
    })
}

async function loadAllFiles() {
    const xhr1 = await openFile('a.txt');
    const xhr2 = await openFile('b.txt');
    const xhr3 = await openFile('c.txt');
}

loadAllFiles();

// URLリクエストするパッケージ

const request = require("request");

// Promiseを返す非同期関数

function openFile(filename){

// urlとメソッドが決定

const param = {

url: "http://localhost/" + filename,

method: "GET"

}

// 返り値はPromiseオブジェクト

return new Promise((ok, ng)=>{

// 非同期関数のrequestで指定されたURLへアクセス

request(param, function (error, response, body) {

if(error){

ng("ページを取得できませんでした");

}else{

console.log(body);

ok("取得できました");

}

})

}

async function loadAllFiles() {

const xhr1 = await openFile('a.txt');

const xhr2 = await openFile('b.txt');

const xhr3 = await openFile('c.txt');

}

loadAllFiles();

関連記事