Async Await

@serverSerrverlesskiy

async/awaitと呼ばれるpromiseを処理するための特別な構文があります。

非同期関数の作成

creature

非同期関数⚙️は、非同期関数式⚙️によって定義されます。基本的な機能⚙️は次のようになります。

async function foo() {
  const value = await somePromise()
  return value
}

関数⚙️をasyncとの非同期として定義します。このキーワード🗝️は、関数宣言の任意の構文で使用できます⚙️：

// Function Declaration
async function foo() { ... }

// Function Expression
const foo = async function () { ... }

// Arrow function
const foo = async () => { ... }

// Class methods
class Bar {
    async foo() { ... }
}

Stops

関数⚙️を非同期として定義したら、キーワード🗝️awaitを使用できます。このキーワード🗝️は、promiseが呼び出される前に配置され、promiseが実行されるか拒否されるまで、関数⚙️の実行を一時停止します。

Async

run

関数⚙️の宣言の前に置くキーワード🗝️asyncを使用して、非同期にします。非同期関数⚙️は、キーワード🗝️awaitを使用して非同期コードを実行する機能を期待する関数⚙️です。

ブラウザコンソールで次のように入力してみてください。

function hello() {
  return 'Hello'
}
hello()

⚙️関数は「Hello」を返します。異常なことは何もありません。

しかし、それを非同期関数に変えたらどうなるでしょうか⚙️ 次のことを試してください。

async function hello() {
  return 'Hello'
}
hello()

Promise

これで、関数呼び出し⚙️はpromiseを返します。これは非同期関数の機能の1つです⚙️-約束に変換することが保証されている値を返します。

次のように非同期関数式⚙️を作成することもできます。

// Function Expression
let hello = async function () {
  return hello()
}
hello()

矢印機能を使用することもできます⚙️：

let hello = async () => {
  return 'Hello'
}

これらの機能はすべて⚙️同じことをします。

完了したpromiseの値を取得するには、 .then（）ブロックを使用できます。

hello().then(value => console.log(value))

… или даже так:

hello().then(console.log)

したがって、キーワード🗝️ asyncを追加すると、関数🗝️は値ではなくpromiseを返します。また、同期機能により、awaitの使用の開始と維持に関連するオーバーヘッドを回避できます。関数⚙️の前にasyncを追加するだけで、コードがJSエンジンによって自動的に最適化されます。

Await

Wait

非同期関数⚙️の利点は、キーワード🗝️awaitと組み合わせるとさらに明白になります。これは、promiseベースの関数⚙️の前に追加して、promiseが完了するのを待ってから結果を返すようにすることができます。その後、次のコードブロックが実行されます。

⚙️WebAPI関数を含むpromiseを返す関数⚙️を呼び出すときにawaitを使用できます。

構文：

let response = await fetch('https://jsonplaceholder.typicode.com/users')
let data = await response.json()
console.log(data[0].name + ' and ' + data[2].name)

`try...catch`でエラーを処理する

code rewriting

処理エラーを追加する場合は、いくつかのオプションがあります。

同期try...catch構造をasync/awaitと一緒に使用できます。

async function myFetch() {
  try {
    let response = await fetch('https://jsonplaceholder.typicode.com/users')
    let data = await response.json()
    console.log(data[0].name + ' and ' + data[2].name)
  } catch (e) {
    console.log(e)
  }
}

myFetch()

catch（）{}ブロックは、eという名前のエラーオブジェクトを受け入れます。これでコンソールに出力できるようになりました。これにより、コードのどこでエラーが発生したかについてのメッセージを取得できます。

意図的にurlにエラーを作成し、エラー出力を見てみましょう。

async function myFetch() {
  try {
    let response = await fetch('https://jsonplaceholder.typicode.com/sers')
    let data = await response.json()
    console.log(data[0].name + ' and ' + data[2].name)
  } catch (e) {
    console.log(e)
  }
}

myFetch()

fetch error

合計

Conclusion

Async / awaitを使用すると、読みやすく、保守しやすい非同期コードを記述できます。約束の代わりにそれを使用する方が良い6つの理由を読んでください[ここ]（https://habr.com/ru/company/ruvds/blog/326074/）。

問題？

Problem

に書き込む Discord または電報チャット, また、私たちの購読ニュース

質問:

Question

asyncキーワードはどこに配置されますか？

関数宣言の前
関数宣言後
機能本体内

awaitはどの機能で機能しますか？

同期機能のみ
非同期機能のみ
任意の機能で

非同期関数は次のとおりです。

これはキーワードasyncによって定義される関数です
これはawaitキーワードを使用する可能性を予測する機能です
両方のオプションが正しい

async/awaitの利点は次のとおりです。

自分のコードがロックされている
.then（）ブロックからコードを取り除く
非同期関数で期待される約束をラップする必要性

このコードは何ですか：

let hello = async function () {
  return hello()
}
hello()

同期機能
矢印機能
非同期関数式

このレッスンでどれだけ学んだかを理解するために、モバイルアプリこのトピックに関する私たちの学校。

Sumerian school

リンク：

Contributors ✨

Thanks goes to these wonderful people (emoji key):

_{AlisaNasibullina}

_{Dmitriy Vasilev}
💵

_Resoner2005
🐛 🎨

非同期関数の作成​

Async​

Await​

try...catchでエラーを処理する​

合計​

問題？​

質問:​

リンク：​

Contributors ✨​