Hapicode

# 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

関連記事

Nuxt.js と Ant Design Vue 2 テーマカスタマイズ

Nuxt.jsとAnt Design Vue 2を使用してテーマカスタマイズしてみました。...

JavaScript ライブラリ aos.js 使ってスクロール連動アニメーション

aos.js ライブラリ使ってHTML要素がスクロールと連動してアニメーションをします。...

Cookie localStorage sessionStorage の違い

Cookie とWeb Storage localStorage sessionStorageの違い...

大きいファイルをスライス分割してアップロード

大きいファイルを分割アップロードする方法、並行処理と失敗した際の自動アップロードします。...

Javascript DataTables で excel 風 table 作る

JQueryでエクセル風テーブルの一部だけ横スクロールできるようにDataTables使ってみました...

javascript 配列 重複排除

javascriptで配列重複排除の複数やり方をまとめ、よく使うfilterとEcmaScript ...

bootstrap vuejs 使って generate する際に babel が icons ファイル max 500KB エラー
開発時によく使うゼロ埋めパディング作業まとめ

mysql twig phpとjavascriptでよく使うゼロ埋めのいろいろ...

nuxtjs と codeigniter で jwt システム構築

nuxtjsとcodeigniterでシステム構築する際のメモ...

javascript 日本語 shift-js 対応 CSV ダウンロード

javascript shift-jsエンコード CSVダウンロードが必要になったので、作ってみまし...

開発におけるコーディングルール・規約

コーディングルールと規約を大事にする、複数人で開発しても、一人で開発してもメンテナンスやコードのわか...

javascript 　指定場所にスムーズにスクロールする方法

クリックして指定のアンカーにスクロールするjavascript作成しました。scrollToとscr...

react 強制的にレンダリングする方法

React使って値は変更されるけど、画面描写されないトラブルの対応方法...

Jsconfig と Tsconfig

javascriptで開発する際に使うjsconfigとtsconfigのjsonファイルとはなにか...

Javascript var let const 変数宣言の違い

javascript varとlet 違い これからはvarよりlet constを書くようにすべき...

Javascript 電話番号フォーマット

固定電話 携帯電話 フリーダイヤルなどの電話番号をハイフォン入で自動フォーマットしてくれるjavas...

国際化 i18n と地域化 L10N

i18n が internationalization の略で国際化という意味で、地域化は L10n...

javascript 文字列と配列検索 indexOf findIndex find some includes 関数の違い

よく使う文字列と配列検索関数比較 javascript 文字列と配列検索 indexOf findI...

vuejs back to top button component 作成

vue でトップに戻るボタンを作ることがよくありますが、ライブラリー使わずに実現してみました。...

Nuxtjs 動的なルーティング静的ページ自動生成

Nuxtjs 動的なルーティング使ってAPIとJSONで静的ページ一括生成してSEO対策...

キーコード取得 ＆ キーコード一覧

javascriptで Tabキー 無効化をする仕事があり、キーコードの一覧を備忘録的にメモ...

Sweet Alert swal に複数 content

javascriptアラートを綺麗に表示する粋なライブラリSweetAlertのswalの中のcon...

moment.js 使って日本語曜日対応

momentjsの日本語表示、曜日の日本語表示と略称表示について...

javascript 開発で出会った TypeError

vuepress で Cannot read property 0 of undefinedのタイプ...

ReferenceError: location is not defined

ssrレンダリングする時に出る location is not defined エラー##...

vuejs で omisejapan の決済フォーム作成した時のメモ

フロント開発 omisejapan カードペイメント vuejs でフォーム開発する時のメモ...

ブラウザーで動く javascript のクッキー操作ライブラリ js-cookie

フロントのブラウザー側で動くjs cookieについて...

javascript reduce 連想配列の合計計算覚えよう

javascript 配列 sum 合計計算、reduce 使ってやってみて覚える連想配列の落とし穴...

nodejs 使う時のエラーたち

node学習しながらエラーの原因などを調べてメモります。...

javascript で作る html から PDF 変換 pdfmake の日本語対応

html pdf 変換する際に使っていたjavascriptライブラリpdfmakについて調べたこと...

javascript 楽しく遊ぼう!メッセージつぶやくウシ cowsay

楽しくjavascriptを遊ぶ用のパッケージcowsayについてのメモ...

Javascript vuejs の validation 正規表現でフォームチェック作ったときのメモ

電話番号チェック・メールアドレスチェック・文字チェック・郵便番号のチェックに使えるjavascrip...

正規表現一覧 よく使う検索・置換のパターン

よく使う正規表現、文字検索・置換をまとめてみました。...

javascript password generator ランダム文字列パスワード作成

javascriptで大文字・小文字・数字・記号対応のランダムパスワードつくることがありますが、vu...