JavaScriptの非同期通信, Ajax通信

同期処理とは

上から順番にひとつずつ処理されていく。
一つの処理が終わるまで次の処理は実行されない。

#　非同期処理とは
一つの処理が終わるのを待たずに次の処理を実行する

setTimeout(() => {
    console.log('こんにちは');
}, 3000);

第二引数の秒数(3秒)待って第一引数の中身を実行する

「○秒待ってから処理する」あるいは「何かが完了したら処理する」ということも実現できるようになっている。

Ajax

Asyncronous JavaScript + XMLの略。
ユーザーが何かのアクションをするとサーバーで生成された新しいHTMLを読み込む方法ではなく、非同期通信を行いながらHTMLの必要な箇所だけをサーバーから取得して既存のHTMLを書き換える方法。

サーバーから結果が返ってくるまで他の処理を止めてしまうとその間JavaScriptの処理が止まってしまう。
Ajax通信には非同期処理を組み合わせて利用することが必要になる。

//APIURLを叩く
fetch('https://qiita.com/api/v2/items?query=tag:JavaScript')
    .then(response => {
        //consoleでレスポンスの中身を見ている
        console.log(response);
        //レスポンスをjson形式で戻り値にする
        return response.json();
    })
    //APIURLを叩いたときの結果になる
    .then(data=> {
        console.log(data);
    });
console.log('APIを叩きます');

.thenでfetchの結果が返ってきてから戻り値を見ている
.thenは関数を引数に取り、Responseオブジェクトがその引数として設定されている。
Responseオブジェクトにjsonメソッドを利用してreturnすることで、その次のthenの引数にはdataが渡される。
このdataの中身はそれぞれの記事と情報を配列としたもの。

fetch

Ajax通信を行うために作られた機能。
第一引数にAPI URLを指定できる。
https://qiita.com/sotasato/items/31be24d6776f3232c0c0

Promise

Promiseを使うと何かの非同期処理を行う際に、それが終わった後の処理を同時に書くことが可能になる。基本的に自分でプロミスを作ることはなさそう。

func = resolveが終わるまでconsole.logしないメソッド

const func = () => {
    const promise = new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve();
        }, 3000);
    });
    return promise;
};

func()
    .then(() => {
        console.log('done');
});

エラー処理

const func = () => {
    const promise = new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve();
        }, 3000);
    });
    return promise;
};

func()
    .then(() => {
        console.log('done');
    })
    .catch(() => {
        console.log('error');
    });

Acync

Promise.thenで繋いでいくのは楽だが「○が終わったら○する」をどんどん入れ子にしていくとネストが深くなるのでそれを防ぐ。

async function func(){
    const response = await fetch(
        'https://qiita.com/api/v2/items?query=tag:JavaScript'
    );
    //↑これが終わるまで次の処理をしない
    const data = await response.json();
    //↑これが終わるまで次の処理をしない
    console.log(data);
}

func();

HTTP通信用のライブラリ:axios