HTML: Markup language
CSS: Styling language
JavaScript: Scripting language
Web APIs: Programming interfaces
All web technology
Learn web development
Discover our tools
Get to know MDN better
このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。
View in English Always switch to English
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2020年1月.
async function* 宣言は非同期ジェネレーター関数を定義し、これは AsyncGenerator オブジェクトを返します。
async function*
AsyncGenerator
非同期ジェネレーター関数は、AsyncGeneratorFunction コンストラクターや async function* 式の構文を使用して定義することもできます。
AsyncGeneratorFunction
async function* foo() { yield await Promise.resolve("a"); yield await Promise.resolve("b"); yield await Promise.resolve("c"); } let str = ""; async function generate() { for await (const val of foo()) { str = str + val; } console.log(str); } generate(); // Expected output: "abc"
async function* name(param0) { statements } async function* name(param0, param1) { statements } async function* name(param0, param1, /* … ,*/ paramN) { statements }
メモ: 非同期ジェネレーター関数には、対応するアロー関数はありません。
name
関数名です。
param
関数の構文上の引数名です。
statements
関数の本体を構成する文です。
非同期ジェネレーター関数は、非同期関数とジェネレーター関数の機能を組み合わせたものです。関数の内部で await と yield のキーワードの両方を使うことができます。これにより、ジェネレーター関数の遅延の性質を利用しながら、await で人間工学的に非同期タスクを処理することができるようになります。
await
yield
function* で宣言された通常のジェネレーター関数とは異なり、非同期ジェネレーター関数は AsyncGenerator オブジェクトを返します。非同期反復可能プロトコルに準拠しています。next() を呼び出すたびに、イテレーターの結果オブジェクトに解決する Promise を返します。
function*
next()
Promise
非同期ジェネレーターからプロミスが生成されると、イテレーターの結果のプロミスの最終的な状態は、生成されたプロミスの状態と一致します。例えば次のようになります。
async function* foo() { yield Promise.reject(1); } foo() .next() .catch((e) => console.error(e));
生成されたプロミスが拒否された場合、イテレーターの結果も拒否されるため、1 がログ出力されます。非同期ジェネレーターの解決結果の value プロパティは、別のプロミスにはなりません。
1
value
async function* 宣言は、そのスコープの先頭に巻き上げされ、そのスコープ内のどこでも呼び出すことができます。
非同期ジェネレーター関数は、常に結果のプロミスを生成します。それぞれの yield 手順が同期的であってもです。
async function* myGenerator(step) { await new Promise((resolve) => setTimeout(resolve, 10)); yield 0; yield step; yield step * 2; } const gen = myGenerator(2); gen .next() .then((res) => { console.log(res); // { value: 0, done: false } return gen.next(); }) .then((res) => { console.log(res); // { value: 2, done: false } return gen.next(); }) .then((res) => { console.log(res); // { value: 4, done: false } return gen.next(); }) .then((res) => { console.log(res); // { value: undefined, done: true } return gen.next(); });
この例では、Node の fs/promises モジュールを使用して、一連のファイルを読み、リクエストされたときだけそのコンテンツにアクセスするようにしています。
fs/promises
async function* readFiles(directory) { const files = await fs.readdir(directory); for (const file of files) { const stats = await fs.stat(file); if (stats.isFile()) { yield { name: file, content: await fs.readFile(file, "utf8"), }; } } } const files = readFiles("."); console.log((await files.next()).value); // Possible output: { name: 'file1.txt', content: '...' } console.log((await files.next()).value); // Possible output: { name: 'file2.txt', content: '...' }
Enable JavaScript to view this browser compatibility table.
GeneratorFunction
yield*
Function