JavaScript非同期
「asyncとawaitを使用するとpromiseを書きやすくなります」
asyncは関数にPromiseを返させます
awaitはは関数にPromiseを待機させます
非同期構文
関数の前にキーワードasyncを指定すると、関数はPromiseを返します。
例
async function myFunction() {
return "Hello";
}
以下と同じです:
function myFunction() {
return Promise.resolve("Hello");
}
Promiseの使用方法は次のとおりです。
myFunction().then(
function(value) { /* code if successful */ },
function(error) { /* code if some error */ }
);
例
async function myFunction() {
return "Hello";
}
myFunction().then(
function(value) {myDisplayer(value);},
function(error) {myDisplayer(error);}
);
または、通常の値(エラーではなく通常の応答)が期待されるため、より単純です。
例
async function myFunction() {
return "Hello";
}
myFunction().then(
function(value) {myDisplayer(value);}
);
待機構文
キーワードasyncは関数await内でのみ使用できます 。
このawaitキーワードにより、関数は実行を一時停止し、解決されたPromiseを待ってから続行します。
let value = await promise;
例
ゆっくりと使い方を学びましょう。
基本構文
async function myDisplay() {
let myPromise = new Promise(function(resolve, reject) {
resolve("I love You !!");
});
document.getElementById("demo").innerHTML = await myPromise;
}
myDisplay();
2つの引数(resolveとreject)は、JavaScript によって事前定義されています。
それらを作成しませんが、エグゼキュータ関数の準備ができたらそれらの1つを呼び出します。
多くの場合、reject関数は必要ありません。
拒否なしの例
async function myDisplay() {
let myPromise = new Promise(function(resolve) {
resolve("I love You !!");
});
document.getElementById("demo").innerHTML = await myPromise;
}
myDisplay();
タイムアウト待ち
async function myDisplay() {
let myPromise = new Promise(function(resolve) {
setTimeout(function() {resolve("I love You !!");}, 3000);
});
document.getElementById("demo").innerHTML = await myPromise;
}
myDisplay();
ファイルを待ち
async function getFile() {
let myPromise = new Promise(function(resolve) {
let req = new XMLHttpRequest();
req.open('GET', "mycar.html");
req.onload = function() {
if (req.status == 200) {
resolve(req.response);
} else {
resolve("File not Found");
}
};
req.send();
});
document.getElementById("demo").innerHTML = await myPromise;
}
getFile();
ブラウザのサポート
ECMAScript2017では、JavaScriptキーワードasyncとawaitが導入されました。
次の表は、両方を完全にサポートする最初のブラウザーバージョンを示しています。
| クロム 55 | エッジ 15 | Firefox 52 | サファリ 11 | オペラ 42 |
| 2016年12月 | 2017年4月 | 2017年3月 | 2017年9月 | 2016年12月 |
プログラミング学習を加速させる
プログラミングをプロの講師に教えてもらいませんか。