# 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);
});
}
});
- ファイルを選択、uploadFile 関数が呼び出す
- ファイルをチャンクに分割し、プロミス用意する
- Promise.all を使って全てのチャンクがアップロード
async と await の日本語読み
async：アシンク・エイシンクawait：アウェイト
「アシンク」と「エイシンク」のどちらもプログラミングコミュニティで通じますが、「エイシンク」のほうがより一般的かな？
ちなみに英語では asynchronous エイスィンクロナスと読みます。
発音 eisíŋkrənəs、カナエイスィンクロナス、分節 a・syn・chro・nous