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