【Vue】axiosで実行する複数の処理を順番に実行する

Question

axiosを使ってAPI経由でデータのやり取りをするアプリケーションを作っています。
組み合わせるて順番に実行させる方法についてご教示ください。

概要

下記のようなフォームでTodoを登録し、
登録したものも含めて一覧で表示するとします。

API経由でデータを保存して、保存したデータを含めて表示用に加工された一覧データを取得して更新します。
その場合、APIにリクエストするのは下記の２つを順番に処理します。

1. データベースにデータを追加
2. データ一覧を更新

実現したい事

API経由で通信中は別の処理ができないようにしたいです。
上記フォームの「送信」ボタンを連続で押されても処理が終わるまでは何もしないようにしたいです。

ソース

下記のようなコンポーネントを用意しました。
多重送信できないように、processingフラグで管理しています。

APIとのやりとりを行う関数は次のような物を用意しました。
上記フォームとは別に管理画面が用意しておりTodoを操作できる想定です。
そのため、登録時に最新情報を取得する必要があります。

関数名	内容	URL	メソッド
addTodo()	投稿文(body)をDBに追加	http://api.example.com/api/todos	POST
getTodos()	保存された内容をDBから取得	http://api.example.com/api/todos	GET

<template>
<div>
  <div class="form-group row justify-content-center">
    <input
      class="form-control col-sm-10"
      type="text"
      name="body"
      :disabled="processing"
    />
    <button
      class="btn btn-primary2 col-sm-2"
      type="button"
      @click="addTodo"
    >送信する</button>
  </div>

  <div class="row justify-content-center">
    <div class="col-11">
      <div class="table-responsive">
        <table class="table">
          <thead>
            <tr>
              <th class="th-time">時間</th>
              <th class="th-name">内容</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="todo in todos">
              <td>{{ todo.created_at }}</td>
              <td>{{ todo.text }}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
</template>

<script>
export default {
  name: "TodoComponent",
  props: {
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      body: '',
      todos: [],
      processing: false
    }
  },
  methods: {
    // todo追加
    addTodo() {
      // プロセスが終了していない場合は何もしない
      if(this.processing) {
        return false;
      }
      // プロセスを始める
      this.processing = true;

      let self = this;
      let data = {
        body: this.body
      };
      
      let url = 'http://api.example.com/api/todos';
      axios.post(url, data)
        .then(function(){
			// 実現したい事の2.に書いた一覧の取得
        	// ただし、非同期ではないためこの処理を待たずにfinallyに進んでしまう
          self.getTodos()
        })
        .catch(function(e){
			// 登録できなかった時はエラー
          console.log('error');
        })
        .finally(function() {
          // 登録できてもできなくてもプロセスの状態を元に戻す
          self.processing = false;
        });
    },

    // 一覧取得
    getTodos() {
      let self = this;
      let url = 'http://api.example.com/api/todos';

      axios.get(url, {
        headers: {
          "Content-Type": "application/json"
        },
        data: {}
      })
      .then(function(result){
		 // 一覧を更新 
		 self.todos = result.data.todos;
      })
      .catch(function (e) {
        console.error(e);
      })
    },
  }
  mounted() {
    // 読み込み時に最新の一覧を取得しておく
    this.getTodos();
  },
}
</script>

現状

1の登録時は制止できるのですが、2の一覧取得する処理のgetTodos()中に実行できてしまいます。
登録処理のaddTodoのthenの中に書いているので、追加中かどうかは判定できているのですが、getTodos()の状態は取得することが出来ていません。

axiosの処理の後に、再度axiosを入れ子にする方法はないでしょうか？

Answer 1

◯ 概要

Promise を止めるには await が使えます。自信はないのですが、これを利用してはどうでしょうか？

• Promiseとasync/awaitでJavaScriptの非同期処理をシンプルに記述する

◯ 挙動

sleep を Promise 化したもので挙動を確認してみます。

async function sampleCode() {
  await sleep(3)
    .then(() => {
      console.log("No. 1");
    })
    .catch(error => {
      console.log(error);
    });

  console.log("No. 2");
}

function sleep(time) {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve();
    }, time * 1000);
  });
}

sampleCode();

> sampleCode();
No. 1
No. 2
> // ちなみに await を消すと No. 2, No. 1 で表示されます。

• [JavaScript] sleep(setTimeout) を Promise化する

◯ 提案

  methods: {
    addTodo: async () => {  // <--- 追記
      if(this.processing) {
        return false;
      }
      this.processing = true;

      let self = this;
      let data = {
        body: this.body
      };

      let url = 'http://api.example.com/api/todos';
      axios.post(url, data)
        .then(function(){
          await self.getTodos()  // <--- 追記
        })
        .catch(function(e){
          console.log('error');
        })
        .finally(function() {
          self.processing = false;
        });
    },

    // 一覧取得
    getTodos: async () => {  // <--- 追記
      let self = this;
      let url = 'http://api.example.com/api/todos';

      return axios.get(url, { // <--- 追記
        headers: {
          "Content-Type": "application/json"
        },
        data: {}
      })
      .then(function(result){
         // 一覧を更新 
         self.todos = result.data.todos;
      })
      .catch(function (e) {
        console.error(e);
      })
    },
  }

◯ そのほか

async/await を使わなくても、止められないか MDN を見て allSettled というのを見つけたのですが。そういった動きはしてくれませんでした。

• Promise.allSettled() - MDN
• fulfilled, rejected, settled...　Promiseの用語、全部分かりますか？ - Qiita

Comments

[hasshy]

お忙しい中調べていただきありがとうございます。
回答を確認させていただきました。
async/awaitを使って応答を待つ事も出来るのですね。
実装例まで書いていただきとても助かります。
参考にさせていただきます。

[hasshy]

ありがとうございます。
解決できました。

一点修正が必要な箇所がありましたのでご共有させてください。
axiosのthenで使用する無名関数は、async関数にする必要がありました。

[nico25]

コードが不正確で、お手数おかけしました。
ご共有いただき、ありがとうございます。
勉強になりました :)