【Javascript】非同期処理 - ハッピーメモメモ

めちゃ難しい…！！

初心者の壁かも？

焦らずゆっくり理解しよう✨

同期処理／非同期処理

＜同期処理＞

・１つの処理を実行し、完了したら次の処理を実行し…を繰り返していく

＜非同期処理＞

・処理を実行したら、完了する前に次の処理に進む

・メリット：時間のかかる処理があっても、その完了を待たずに他の処理と並行して進められる

axios

・HTTP通信（Webサーバーにアクセスして必要な情報をやり取りする）のための機能を提供するパッケージ

await

〇非同期処理のために使われるキーワード

〇非同期処理を同期処理的に実行する

（本来非同期で実行される処理を、処理が終わるまで待って次に進むようにする）

・非同期処理では、結果を戻り値として受け取れない！

（実行したら次の処理にどんどん進んでいってしまうため）

・そのため、awaitをつけて呼び出すことで、指定したアドレスにアクセスし、その結果が返ってくるまで待って（同期処理）、結果の受け取りを行う必要がある

〇awaitを利用する場合は、それが入っている関数の冒頭に「async」をつけておく必要がある

async

・

Promise

〇概要

・デザインパターンの一種

・ECMAScript6（ES2015）で標準化された組み込みのクラス

・非同期処理の完了 (もしくは失敗) の結果およびその結果の値を表す

〇状態

待機 (pending): 　初期状態。成功も失敗もしていません。
履行 (fulfilled): 　処理が成功して完了したことを意味します。
拒否 (rejected): 　処理が失敗したことを意味します。

使い方

Vueコンポーネント

・axiosが動くのは「store.js」なので、ここではインポートしなくてもOK

・即自関数（関数定義＋実行。関数名をつけなくていいやつ！）で書くともっとすっきりするけど、VUE？Composition　API？ではうまく動かず…

<script>
import { reactive } from "vue";
import { useStore } from "vuex";

export default {
  name: "ListP",
  setup() {
    const data = reactive({
      book_list: ,
    });
    const store = useStore();

    // これはPromise（非同期処理の結果）
    store.dispatch("getBookList");

    // awaitをつけるとPromiseが普通のオブジェクトに変わる
    // awaitはPromiseが解決するまで待つ
    // awaitは一番上では使えない（トップレベルawait）
    // await store.dispatch("getBookList");

    // なのでasyncをつける！
    const getBookList = async () => {
      const result = await store.dispatch("getBookList");
      console.log(result)
      data.book_list = result;
      console.log("ListPコンポーネント");
      console.log(data.book_list);
    };
    
    getBookList();

    // (async () => {
    //   await store.dispatch("getBookList");
    //   console.log('即自関数')
    // })

    return {
      data,
      getBookList,
    };
  },
};
</script>

store.js

import { createStore } from 'vuex';
import axios from "axios";
import createPersistedState from 'vuex-persistedstate'

export const store = createStore({
    state() {
        return {
            book_list: ,
            book_info_list: [],
        }
    },

    mutations: {
        // book_info_listに書籍情報一覧を保管する
        // 本の一覧／書籍情報の削除にて使用
        call: (state,obj) => {
            state.book_info_list = obj.concat();
            console.log('mutations');
            console.log(store.state.book_info_list);
            console.log(store.state.book_info_list[0].title);
        },
    },
    actions:{
        // async関数はpromise（非同期処理の結果）を返す
        getBookList: async (context)=>{
            const url = "http://127.0.0.1:8000/api/book_information";
            const result = await axios.get(url);
            console.log('actions');
            console.log(result.data);
            context.commit('call',result.data);
            return store.state.book_info_list;
        }
    },
    plugins: [
        createPersistedState(),
    ],
})

export default store