JavaScript の Async/Await の新しい構文を理解する

Zeit チームのブログ投稿 に触発されて、PayPal チームは最近、サーバー側データベースを Async/Await に移行しました。私の経験を皆さんと共有したいと思います。

まず、次の 2 つの用語を理解しましょう:

• 非同期関数
• Await キーワード

あなたはいつも Async と Await について一緒に話しますが、知っておく必要があるのは、これらは 2 つの異なるものであるということです。 Async 関数と Await キーワードについて理解する必要があるのは、これらは確かにある程度の関連性がありますが、Async 関数は Await なしでも使用できるということです。

#関連する学習の推奨事項:

JavaScript ビデオ チュートリアル

関数は Promise を返します

async キーワードを使用して関数を作成すると、関数は常に Promise を返します。非同期関数内に戻ると、値が Promise でラップされます。

 // here is an async function
 async function getNumber() {

  return 4 // actually returns a Promise
  }
  // the same function using promises
  function getNumber() {

     return Promise.resolve(4)

}

Async 関数とその Promise ベースの同等物

戻り値を Promise に変換することに加えて、async 関数には特別な機能があります。それは、await キーワードを使用する唯一の場所であるということです。

Await を使用すると、Promise の結果を受け取るまで非同期関数の実行を一時停止できます。これにより、実行順序に従って表示される非同期コードを作成できます。

 // async function to show user data
 async function displayUserData() {

    let me = await fetch('/users/me')

    console.log(me)

}// promise-based equivalent
function displayUserData() {

    return fetch('/users/me').then(function(me) {

        console.log(me)

    })

})

Await を使用すると、コールバックを必要とせずに非同期コードを作成できます。この利点は、コードが読みやすくなることです。また、await は、非同期関数で作成された Promise だけでなく、あらゆる Promise と互換性があります。

非同期関数でのエラーの処理

非同期関数は Promise でもあるため、コードに非同期関数を含めると、次のようになります。吸収され、拒否された Promise として返されます。

 // basic error handling with async functions
 async function getData(param) {

   if (isBad(param)) {     
    throw new Error("this is a bad param")

   }   
   // ...
   }
   // basic promise-based error handling example
   function getData(param) {

   if (isBad(param)) {      
   return Promise.reject(new Error("this is a bad param"))

   }  
    // ...
    }

await を使用して Promise を呼び出す場合は、

try/catch でラップするか、返された Promise に catch ハンドラーを追加する必要があります。

 // rely on try/catch around the awaited Promise

async function doSomething() {   
 try {       
  let data = await getData()

    } catch (err) {       
     console.error(err)

    }

}
// add a catch handlerfunction doSomething() {    
return getData().catch(err => {      
  console.error(err)

    })

}

統合

Promise のエラー処理プロパティと非同期関数の簡潔な構文をうまく活用すると、強力な機能が得られます。能力。

以下の簡単な例では、非同期関数に固有のエラー処理機能をどのように利用して、Express アプリケーションのエラー処理プロセスを簡素化できるかを示しています。

 // catch any errors in the promise and either forward them to next(err) or ignore them
 const catchErrors = fn => (req, res, next) => fn(req, res, next).catch(next)
 const ignoreErrors = fn => (req, res, next) => fn(req, res, next).catch(() => next())
 // wrap my routes in those helpers functions to get error handling
 app.get('/sendMoney/:amount', catchErrors(sendMoney))
 // use our ignoreErrors helper to ignore any errors in the logging middleware
 app.get('/doSomethingElse', ignoreErrors(logSomething), doSomethingElse)
 // controller method can throw errors knowing router will pick it up
 export async function sendMoney(req, res, next) {  
 if (!req.param.amount) {     
 throw new Error('You need to provide an amount!')  

  }  await Money.sendPayment(amount) // no try/catch needed

  res.send(`You just sent ${amount}`)}

// basic async logging middleware
export async function logSomething(req, res, next) {

    // ...    
    throw new Error('Something went wrong with your logging')

    // ...

}

以前は、エラーの処理に

next(err) を使用していました。ただし、async/await を使用すると、コード内の任意の場所にエラーを配置でき、ルーターはこれらのエラーを Express が提供する次の関数にスローするため、エラー処理プロセスが大幅に簡素化されます。

データベースの移行に数時間を費やしました。この方法を使用するために必要なのは、Promise を深く理解し、babel をセットアップする方法を学ぶことだけです。

以上がJavaScript の Async/Await の新しい構文を理解するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。