[javascript]Axios並列処理方法

Axiosとは?

Axiosはブラウザ、Node.jsのためのPromise APIを活用するHTTP非同期通信ライブラリです。 実務ではFetchApiよりAxiosをよく使うそうです。

Axiosの並列処理

login.js

import axios  from 'axios';

    // 省略
#onSubmit = e => {
    axios.post('/api/authentication', loginData)
      .then(result => {
        return result.data.result;
      })
      .then(({ id, token }) => {
        const options = { headers: { token } };
        this.#data.store.token = token;

        return axios.all([
          axios.get(`/api/user/${id}`, options),
          axios.get(`/api/user/${id}/posts`, options),
        ]);
      })

      .then(([profile, posts]) => {
        this.#data.store.userProfile = profile.data.result;
        this.#data.store.userPosts = posts.data.results;

        location.href = '/#/profile';
      })
      .catch(error => {      
        this.#loginFail = true;
        this.render();
      });
  }

上のロジックは、ログインフォームでログインボタンを押した時submitイベントが発生した時、呼び出される関数です。関数の内容では、ログイン認証に成功をすると、ログインユーザのプロフィール情報と書き込みを表示します。

axios.post()

axios.post('/api/authentication', loginData)
  .then(result => {
    return result.data.result;
  })

Axiosはpromiseをリターンするライブラリであるため、thenチェーンを使用しています。最初のthen()は成功したとき、呼び出されます。

axios.all(array) - api並列処理

.then(({ id, token }) => {
    const options = { headers: { token } };
    this.#data.store.token = token;

    return axios.all([
      axios.get(`/api/user/${id}`, options),
      axios.get(`/api/user/${id}/posts`, options),
    ]);
 })

ログインに成功したら、idとtokenを持ってユーザープロファイルと投稿情報を出力します。 そのためには、ユーザープロファイルapiと投稿情報apiを呼び出す必要があります。 この2つのapiを直列処理するよりも並列処理する方が時間的に節約できるので、api呼出方式を並列処理方式にした方が良いでしょう。
そのためにはaxios.all(array)を使います。

axios.all(array) - リターン処理

.then(([profile, posts]) => {
  this.#data.store.userProfile = profile.data.result;
  this.#data.store.userPosts = posts.data.results;

  location.href = '/#/profile';
})
.catch(error => {      
  this.#loginFail = true;
  this.render();
});

並列処理したapiの中で、誰が一番最初に終わるのかは分かりません。
並列処理したapi n個のapiがすべて完了したとき、次にthenを呼び出すことになります。
[profile, posts] この順序はaxios.all(array)のarrayの順序が保障されます。
catch()はapi通信結果が異常だった場合、この関数がキャッチします。