【ES 8(2017)】async/await
7093 ワード
async
およびawait
はより優雅な非同期プログラミングソリューションであり、Promise
の拡張である.非同期を扱うときは、コールバック関数よりも、
Promise
のthen
の方法がより簡潔で明瞭に見えるが、複数の相互依存の要求を処理するときには、やや煩雑に見える.この時、async/await
を使ってもっと優雅です.JavaScriptは単一スレッドであることを知っています.Promiseを使ってから、非同期操作をより簡単に書くことができます.
async
はPromise像の同期操作を書かせます.基本的な使い方
前にasyncを追加した関数は実行後に自動的にPromiseオブジェクトに戻ります.
async function foo() {
return 'hello'
}
console.log(foo()) // Promise
await
の後には非同期動作が必要であり、そうでなければ意味がない.await
の後のPromise
のオブジェクトはthen
を書く必要がない.function timeout() {
return new Promise(resolve => {
setTimeout(() => {
console.log(1)
resolve('success')
}, 1000)
})
}
async function foo() {
let res = await timeout()
console.log(res)
console.log(2)
}
foo()
// 1 success 2
await
の関数でPromise
を使用すると、async
はここのコードが同期されます.つまり、await
の後のawait
の実行が完了したら結果が続きます.await
は待つという意味です.適用
a.json、b.json、c.jsonを順番に読んで、async/awaitを使ってどうやって実現しますか?
function request(url) {
return new Promise(resolve => {
ajax(url, res => {
resolve(res)
})
})
}
async function getData() {
let res1 = await request('static/a.json')
console.log(res1)
let res2 = await request('static/b.json')
console.log(res2)
let res3 = await request('static/c.json')
console.log(res3)
}
getData()
awaitはasyncマークの関数内部でしか使用できません.単独で使うとSyntx errorをトリガします.