JavaScript/Asynchronous をテンプレートにして作成

開始行:
*JavaScript｜Asynchronous Processing JavaScript における非同期処理 ~ ***CONTENTS #contents2_1 ~ **非同期処理とは プログラミングには、同期処理（sync）と非同期処理（async）... -同期処理とは、コードを書かれた順番に処理するもので、ひと... -非同期処理では処理が終わるのを待たずに次の処理を実行しま... 　JavaScriptにおいて非同期処理の代表的な関数として setTim... setTimeout(コールバック関数, delay); ~ ~ **Promise ***非同期処理の問題 非同期処理の問題は「コードの順番通りには実行されない」と... 例えば以下、 setTimeout(() => console.log('Hello'), 500); console.log('world!'); このコードでは、setTimeoutのリクエストを終えた直後に2行目... また、「xxxxが終わったらXXXXを実行せよ」というかたちで事... ~ ***Promise の概要 そこで、非同期処理をわかりやすく記述できるように導入され... -Promise を new して Promiseオブジェクトを作成 -Promise のコンストラクタに、実行したい処理を書いた関数を... -処理が済んだら、resolve関数を呼び出すことで終了を明示 -thenメソッドに、Promise終了後に処理したい関数を渡す 以上で「Promiseの実行後にXXXXする」という処理を書くことが... ~ ***事例 const promise = new Promise( (resolve, reject) => { setTimeout( () => { console.log('Hello'); resolve(); }, 500 ); }); promise.then( () => console.log('world!') ); このコードの Promiseオブジェクトでは、500ミリ秒後に「hell... ~ ***resolve関数 Promiseを終了させる resolve関数には値を渡すこともできます... const promise = new Promise( (resolve, reject) => { // Do Something resolve('Done!'); }); promise.then((r) => console.log(r)); Done! ~ ***reject関数 Promiseをエラー終了させる reject関数にも値を渡すことがで... const promise = new Promise( (resolve, reject) => { // Do Something reject('Error!'); }); promise.then( () => console.log('Done!') ) // この場合... .catch( (e) => console.log(e) ); // こちら... Error! reject関数に渡された値は catchメソッドで受け取ります（Pro... ~ ***thenチェーン thenメソッドをチェーンする（thenの後に更にthenをつなげて... 非同期処理が必要な場合でも、実際には順序通りの動作が求め... function openFile(url) { const p = new Promise((resolve, reject) => { const xhr = new XMLHttpRequest(); xhr.open('GET', url); xhr.addEventListener('load', (e) => resolve(xhr)); xhr.send(); }); return p; } openFile('sample01.txt') .then((xhr) => openFile('sample02.txt')) .then((xhr) => openFile('sample03.txt')) .then((xhr) => console.log('Done!')); ~ ~ **async / await ***await の意味 await は Promise を同期的に展開する（ように見せかける）機... const promise = new Promise( (resolve, reject) => { // Do Something. resolve('Hello world!'); }); let hw; promise .then((r) => hw = r) .then(() => console.log(hw)); これに await を利用すると非同期処理を同期処理のように書く... const promise = new Promise( (resolve, reject) => { // Do Something. resolve('Hello world!'); }); const hw = await promise; console.log(hw); // Hello world! ~ ***async ただし ''await'' は「トップレベルでの使用は不可」となって... async function helloWorld() { const promise = new Promise( (resolve, reject) => { // Do Something. resolve('Hello world!'); }); const hw = await promise; console.log(hw); } helloWorld(); Hello world! ~ ***事例 前述の XHR（[[XMLHttpRequest]]）を用いて、sample01.txt, s... function openFile(url) { const p = new Promise( (resolve, reject) => { const xhr = new XMLHttpRequest(); xhr.open('GET', url); xhr.addEventListener('load', (e) => resolve(xhr)); xhr.send(); }); return p; } async function loadAllFiles() { const xhr1 = await openFile('sample01.txt'); const xhr2 = await openFile('sample02.txt'); const xhr3 = await openFile('sample03.txt'); console.log('Done!'); } loadAllFiles(); ~ ~ ~

終了行:
*JavaScript｜Asynchronous Processing JavaScript における非同期処理 ~ ***CONTENTS #contents2_1 ~ **非同期処理とは プログラミングには、同期処理（sync）と非同期処理（async）... -同期処理とは、コードを書かれた順番に処理するもので、ひと... -非同期処理では処理が終わるのを待たずに次の処理を実行しま... 　JavaScriptにおいて非同期処理の代表的な関数として setTim... setTimeout(コールバック関数, delay); ~ ~ **Promise ***非同期処理の問題 非同期処理の問題は「コードの順番通りには実行されない」と... 例えば以下、 setTimeout(() => console.log('Hello'), 500); console.log('world!'); このコードでは、setTimeoutのリクエストを終えた直後に2行目... また、「xxxxが終わったらXXXXを実行せよ」というかたちで事... ~ ***Promise の概要 そこで、非同期処理をわかりやすく記述できるように導入され... -Promise を new して Promiseオブジェクトを作成 -Promise のコンストラクタに、実行したい処理を書いた関数を... -処理が済んだら、resolve関数を呼び出すことで終了を明示 -thenメソッドに、Promise終了後に処理したい関数を渡す 以上で「Promiseの実行後にXXXXする」という処理を書くことが... ~ ***事例 const promise = new Promise( (resolve, reject) => { setTimeout( () => { console.log('Hello'); resolve(); }, 500 ); }); promise.then( () => console.log('world!') ); このコードの Promiseオブジェクトでは、500ミリ秒後に「hell... ~ ***resolve関数 Promiseを終了させる resolve関数には値を渡すこともできます... const promise = new Promise( (resolve, reject) => { // Do Something resolve('Done!'); }); promise.then((r) => console.log(r)); Done! ~ ***reject関数 Promiseをエラー終了させる reject関数にも値を渡すことがで... const promise = new Promise( (resolve, reject) => { // Do Something reject('Error!'); }); promise.then( () => console.log('Done!') ) // この場合... .catch( (e) => console.log(e) ); // こちら... Error! reject関数に渡された値は catchメソッドで受け取ります（Pro... ~ ***thenチェーン thenメソッドをチェーンする（thenの後に更にthenをつなげて... 非同期処理が必要な場合でも、実際には順序通りの動作が求め... function openFile(url) { const p = new Promise((resolve, reject) => { const xhr = new XMLHttpRequest(); xhr.open('GET', url); xhr.addEventListener('load', (e) => resolve(xhr)); xhr.send(); }); return p; } openFile('sample01.txt') .then((xhr) => openFile('sample02.txt')) .then((xhr) => openFile('sample03.txt')) .then((xhr) => console.log('Done!')); ~ ~ **async / await ***await の意味 await は Promise を同期的に展開する（ように見せかける）機... const promise = new Promise( (resolve, reject) => { // Do Something. resolve('Hello world!'); }); let hw; promise .then((r) => hw = r) .then(() => console.log(hw)); これに await を利用すると非同期処理を同期処理のように書く... const promise = new Promise( (resolve, reject) => { // Do Something. resolve('Hello world!'); }); const hw = await promise; console.log(hw); // Hello world! ~ ***async ただし ''await'' は「トップレベルでの使用は不可」となって... async function helloWorld() { const promise = new Promise( (resolve, reject) => { // Do Something. resolve('Hello world!'); }); const hw = await promise; console.log(hw); } helloWorld(); Hello world! ~ ***事例 前述の XHR（[[XMLHttpRequest]]）を用いて、sample01.txt, s... function openFile(url) { const p = new Promise( (resolve, reject) => { const xhr = new XMLHttpRequest(); xhr.open('GET', url); xhr.addEventListener('load', (e) => resolve(xhr)); xhr.send(); }); return p; } async function loadAllFiles() { const xhr1 = await openFile('sample01.txt'); const xhr2 = await openFile('sample02.txt'); const xhr3 = await openFile('sample03.txt'); console.log('Done!'); } loadAllFiles(); ~ ~ ~

ページ名: