なんとなくで使用していた非同期処理【async/await/promise】

お恥ずかしながらaxiosでjsonデータをGETで引っ張ってくる際、検索で出てきたソースコードの一部を変更してなんとなくで使用していました。

実装はできたものの、知見がないことに危機感を覚えました。

非同期処理とは

処理を並行して、バックグラウンドで別処理させる方法
(通常、プログラムは上から順に処理を実行、完了、また次の処理実行…であるが、割り込み処理するイメージ)

コールバック関数とは

関数に引数として渡される関数

// 非同期処理を行う関数
function fetchData(callback) {
  setTimeout(() => {
    const data = 'Fetched data';
    callback(data); // コールバック関数を呼び出す
  }, 2000);
}

// コールバック関数を引数に渡す
fetchData((data) => {
  console.log(data); // 'Fetched data' が表示される
});

Promiseとは

「待機や処理順の約束をする」もの
処理が完了した場合はresolveを返し、失敗時にはrejectを返す
.then()や.catch()メソッドを使用して非同期処理の成功、失敗に対する処理の定義をする

function getData() {
  return new Promise((resolve, reject) => {
    // 非同期処理
    if (/* 成功した場合 */) {
      resolve("Data fetched successfully");
    } else {
      reject("Error fetching data");
    }
  });
}

awaitとは

待機を意味する

asyncとは

関数に対してasyncを記述（非同期処理であることを宣言）
常にPromiseを返す
Promiseをより簡潔に記述する為の構文

async function fetchData() {
  try {
    const data = await getData();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
}

以下の2つ、非常にわかりやすく理解が深まったので是非！

【ES6】 JavaScript初心者でもわかるPromise講座 - Qiita