Skip to main content

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キーワードはどこに配置されますか?

  1. 関数宣言の前
  2. 関数宣言後
  3. 機能本体内

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

  1. 同期機能のみ
  2. 非同期機能のみ
  3. 任意の機能で

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

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

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

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

このコードは何ですか:

let hello = async function () {
return hello()
}
hello()
  1. 同期機能
  2. 矢印機能
  3. 非同期関数式

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

Sumerian school

リンク:

  1. Async-await
  2. 非同期をマスターする方法/実際の例を使用してJavaScriptで待機する方法
  3. async/awaitを使用した非同期プログラミング

Contributors ✨

Thanks goes to these wonderful people (emoji key):


AlisaNasibullina


Dmitriy Vasilev

💵

Resoner2005

🐛 🎨

EnglishMoji!