Javascript MEMO

async/awaitの関係(基本)

async/awaitの基本的な処理の説明をします。

async/await(コピーのサンプル)

const copyButton = document.getElementById("copyButton");
const textToCopy = "コピーしたいテキスト";

async function copyToClipboard(text) 
{
	try 
	{
		await navigator.clipboard.writeText(text);
		console.log("テキストがクリップボードにコピーされました");
	} catch (err) {
		console.error("クリップボードへのコピーに失敗しました: ", err);
	}
}

copyButton.addEventListener("click", () => 
{
	copyToClipboard(textToCopy);
});

Promiseを使用して非同期処理を実装しています。
この例ではコピーの結果(成功か失敗か)をPromiseとして受け取っています。

実行順番	処理内容
STEP 1	copyButtonボタンをタップしたイベントにより copyToClipboardメソッドを実行します。
STEP 2	try〜catchの構文を実行します。
STEP 3	awaitはPromiseの解決（または拒否）を待つために使われています。これにより直感的に非同期処理の結果をまるで同期処理のように扱うことができます。 awaitの結果 [OK] 「navigator.clipboard.writeText」を処理します。 [NG] catchの処理を実行します。
STEP 4	awaitの結果(Navigator APIの「writeText」)をPromiseとしてasyncに返します。

Promiseやasync/awaitの将来的な位置付け

PromiseはJavaScriptにおける非同期処理の基幹ともいえる仕組みであり、ES6（ECMAScript 2015）から標準化されています。
async/awaitはその上に構築された構文です。

戻る

back

Async/await relationship (basics)

This section explains the basics of async/await.

async/await (copy example)

copy

const copyButton = document.getElementById("copyButton");
const textToCopy = "The text you want to copy";

async function copyToClipboard(text) 
{
	try 
	{
		await navigator.clipboard.writeText(text);
		console.log("The text has been copied to the clipboard");
	} catch (err) {
		console.error("Copying to clipboard failed: ", err);
	}
}

copyButton.addEventListener("click", () => 
{
	copyToClipboard(textToCopy);
});

Asynchronous processing is implemented using Promise.
In this example, the copy result (success or failure) is received as a Promise.

Execution order	Processing contents
STEP 1	The copyToClipboard method is executed when the copyButton button is tapped.
STEP 2	Executes the try-catch syntax.
STEP 3	await is used to wait for the Promise to resolve (or reject). This allows you to intuitively treat the results of an asynchronous process as if it were a synchronous process. Results of await [OK] Processes "navigator.clipboard.writeText". [NG] Executes the catch process.
STEP 4	The result of await (Navigator API's "writeText") is returned to async as a Promise.

Future Position of Promise and async/await

Promise is the core mechanism for asynchronous processing in JavaScript, and has been standardized since ES6 (ECMAScript 2015).
async/await is a syntax built on top of it.

back