# Javascript 非同期処理 async と await のメモ

async await パターンは、多くのプログラミング言語で非同期処理を行うために設計されております。JavaScript も非同期を処理するために sync と await キーワードが用意されています。

# async 関数と await の基本定義

async キーワードを使用して関数を定義し、await キーワードを使用して、Promise が成功か失敗かの結果を待ちます。

async function fetchData() {
  try {
    const response = await fetch("https://api.hapicode.com/user");
    const data = await response.json();
    // console.log(data);
  } catch (error) {
    // console.error("Error fetching data:", error);
  }
}

fetchData();

# 非同期関数のチェーン

複数の非同期処理を連続して実行する場合も、await を使用して順番に実行することができます。

async function processSequentially() {
  const data1 = await fetchData1();
  console.log("Data 1:", data1);

  const data2 = await fetchData2();
  console.log("Data 2:", data2);

  const data3 = await fetchData3();
  console.log("Data 3:", data3);
}

processSequentially();

# 並行処理

大きいファイルをアップロードする場合、ファイルをチャンク(小さな部分)に分割して並行してアップロードすることで効率を上げることができるので、よく使われます。複数非同期処理を並行処理する場合、Promise.allを使用します。

async function processConcurrently() {
  const [data1, data2, data3] = await Promise.all([
    fetchData1(),
    fetchData2(),
    fetchData3(),
  ]);

  console.log("Data 1:", data1);
  console.log("Data 2:", data2);
  console.log("Data 3:", data3);
}

processConcurrently();

JavaScript でファイルをチャンクに分割し、並行してアップロードする例です。

// チャンクサイズ(例:10MB)
const CHUNK_SIZE = 1024 * 1024 * 10;

// ファイルをチャンクに分割する関数
function splitFileIntoChunks(file) {
  const chunks = [];
  for (let start = 0; start < file.size; start += CHUNK_SIZE) {
    const chunk = file.slice(start, start + CHUNK_SIZE);
    chunks.push(chunk);
  }
  return chunks;
}

// チャンクをアップロードする関数
async function uploadChunk(chunk, chunkIndex) {
  const formData = new FormData();
  formData.append("chunk", chunk);
  formData.append("index", chunkIndex);

  const response = await fetch("/upload", {
    method: "POST",
    body: formData,
  });

  if (!response.ok) {
    throw new Error(`Failed to upload chunk ${chunkIndex}`);
  }
}

// ファイルをアップロードする関数
async function uploadFile(file) {
  const chunks = splitFileIntoChunks(file);
  const uploadPromises = chunks.map((chunk, index) =>
    uploadChunk(chunk, index)
  );

  // 並行してアップロード
  await Promise.all(uploadPromises);
  console.log("File uploaded successfully");
}

// ファイルを選択するイベントリスナー
document.getElementById("fileInput").addEventListener("change", (event) => {
  const file = event.target.files[0];
  if (file) {
    uploadFile(file).catch((error) => {
      console.error("Upload failed:", error);
    });
  }
});
  1. ファイルを選択、uploadFile 関数が呼び出す
  2. ファイルをチャンクに分割し、プロミス用意する
  3. Promise.all を使って全てのチャンクがアップロード

async と await の日本語読み

  • async:アシンク・エイシンク
  • await:アウェイト

「アシンク」と「エイシンク」のどちらもプログラミングコミュニティで通じますが、「エイシンク」のほうがより一般的かな?

ちなみに英語では asynchronous エイスィンクロナスと読みます。
発音 eisíŋkrənəs、カナエイスィンクロナス、分節 a・syn・chro・nous

2024-07-03
  • javascript

関連記事

JavaScript ライブラリ aos.js 使ってスクロール連動アニメーション
大きいファイルをスライス分割してアップロード
Nuxt.js と Ant Design Vue 2 テーマカスタマイズ
bootstrap vuejs 使って generate する際に babel が icons ファイル max 500KB エラー
Cookie localStorage sessionStorage の違い
javascript 楽しく遊ぼう!メッセージつぶやくウシ cowsay
javascript 日本語 shift-js 対応 CSV ダウンロード
Javascript DataTables で excel 風 table 作る
javascript 配列 重複排除
もっと Docker 使おうよ!Node を Docker から引っ張ろうよ
ブラウザーで動く javascript のクッキー操作ライブラリ js-cookie
国際化 i18n と地域化 L10N
javascript 文字列と配列検索 indexOf findIndex find some includes 関数の違い
キーコード取得 & キーコード一覧
Jsconfig と Tsconfig
ReferenceError: location is not defined
moment.js 使って日本語曜日対応
nodejs 使う時のエラーたち
Nuxtjs 動的なルーティング静的ページ自動生成
vuejs で omisejapan の決済フォーム作成した時のメモ
javascript で作る html から PDF 変換 pdfmake の日本語対応
javascript password generator ランダム文字列パスワード作成
Javascript 電話番号フォーマット
react 強制的にレンダリングする方法
javascript reduce 連想配列の合計計算覚えよう
正規表現一覧 よく使う検索・置換のパターン
Sweet Alert swal に複数 content
javascript  指定場所にスムーズにスクロールする方法
Javascript vuejs の validation 正規表現でフォームチェック作ったときのメモ
javascript 開発で出会った TypeError
vuejs back to top button component 作成
Javascript var let const 変数宣言の違い
nuxtjs と codeigniter で jwt システム構築
開発におけるコーディングルール・規約
開発時によく使うゼロ埋めパディング作業まとめ