AsyncとAwaitを備えた最新の非同期JavaScript

JavaScriptの非同期関数への最新のアプローチを発見してください。 JavaScriptは、コールバックからPromisesへと非常に短い時間で進化しました。また、ES2017以降、非同期JavaScriptは、async / await構文を使用することでさらにシンプルになりました。

前書き

JavaScriptコールバックから非常に短い時間で進化しました約束(ES2015)以降ES2017非同期JavaScriptは、async / await構文を使用するとさらに簡単になります。

非同期関数はpromiseと発電機、そして基本的に、それらは約束よりも高いレベルの抽象化です。繰り返します:async / awaitはpromiseに基づいて構築されています

なぜasync / awaitが導入されたのですか?

それらは、約束の周りの定型文を減らし、約束の連鎖の「連鎖を壊さない」制限を減らします。

PromisesがES2015で導入されたとき、それらは非同期コードの問題を解決することを目的としていましたが、ES2015とES2017を分離した2年間で、約束は最終的な解決策にはなり得なかった

有名なものを解決するために約束が導入されましたコールバック地獄問題がありましたが、それ自体が複雑で、構文が複雑でした。

それらは、より良い構文を開発者に公開できる優れたプリミティブでした。そのため、適切なタイミングで、非同期関数

それらはコードを同期のように見せますが、それは非同期であり、舞台裏で非ブロッキングです。

使い方

非同期関数は、次の例のように、promiseを返します。

const doSomethingAsync = () => {
  return new Promise(resolve => {
    setTimeout(() => resolve('I did something'), 3000)
  })
}

あなたがしたいときコールあなたが追加するこの関数await、および呼び出しコードは、Promiseが解決または拒否されるまで停止します。 1つの注意点:クライアント関数は次のように定義する必要がありますasync。次に例を示します。

const doSomething = async () => {
  console.log(await doSomethingAsync())
}

簡単な例

これは、関数を非同期で実行するために使用されるasync / awaitの簡単な例です。

const doSomethingAsync = () => {
  return new Promise(resolve => {
    setTimeout(() => resolve('I did something'), 3000)
  })
}

const doSomething = async () => { console.log(await doSomethingAsync()) }

console.log(‘Before’) doSomething() console.log(‘After’)

上記のコードは、ブラウザコンソールに以下を出力します。

Before
After
I did something //after 3s

Promise all the things

Prepending the async keyword to any function means that the function will return a promise.

Even if it’s not doing so explicitly, it will internally make it return a promise.

This is why this code is valid:

const aFunction = async () => {
  return 'test'
}

aFunction().then(alert) // This will alert ‘test’

and it’s the same as:

const aFunction = async () => {
  return Promise.resolve('test')
}

aFunction().then(alert) // This will alert ‘test’

The code is much simpler to read

As you can see in the example above, our code looks very simple. Compare it to code using plain promises, with chaining and callback functions.

And this is a very simple example, the major benefits will arise when the code is much more complex.

For example here’s how you would get a JSON resource, and parse it, using promises:

const getFirstUserData = () => {
  return fetch('/users.json') // get users list
    .then(response => response.json()) // parse JSON
    .then(users => users[0]) // pick first user
    .then(user => fetch(`/users/${user.name}`)) // get user data
    .then(userResponse => userResponse.json()) // parse JSON
}

getFirstUserData()

And here is the same functionality provided using await/async:

const getFirstUserData = async () => {
  const response = await fetch('/users.json') // get users list
  const users = await response.json() // parse JSON
  const user = users[0] // pick first user
  const userResponse = await fetch(`/users/${user.name}`) // get user data
  const userData = await userResponse.json() // parse JSON
  return userData
}

getFirstUserData()

Multiple async functions in series

Async functions can be chained very easily, and the syntax is much more readable than with plain promises:

const promiseToDoSomething = () => {
  return new Promise(resolve => {
    setTimeout(() => resolve('I did something'), 10000)
  })
}

const watchOverSomeoneDoingSomething = async () => { const something = await promiseToDoSomething() return something + ’ and I watched’ }

const watchOverSomeoneWatchingSomeoneDoingSomething = async () => { const something = await watchOverSomeoneDoingSomething() return something + ’ and I watched as well’ }

watchOverSomeoneWatchingSomeoneDoingSomething().then(res => { console.log(res) })

Will print:

I did something and I watched and I watched as well

Easier debugging

Debugging promises is hard because the debugger will not step over asynchronous code.

Async/await makes this very easy because to the compiler it’s just like synchronous code.


More js tutorials: