ES 2017のAsync(非同期)関数とAwait(待機)を使用します.

23791 ワード
ES 2017は6月に最終決定しました.これに伴い、私の大好きなJavaScript機能を広くサポートしてくれました.async(非同期)関数です.もしあなたが他のステップのJavascriptに頭を痛めていたら、これはあなたのために設計されたものです.もしあなたがいなかったら、あなたは天才かもしれません.
Arync関数は多かれ少なかれJavaScriptコードを作成することを許可します.すべてのロジックをcalbacks、generatorsまたはpromisesに包装する必要はありません.このコードを考えてみます.
    
    
    
    

     
     
     
     JavaScript   :
    
    
    
    

    
    
    
    
    
     
     
     
     
  1. function logger() {
    2. 
     
     
     
     
  2.     let data = fetch(‘http://sampleapi.com/posts’)
    3. 
     
     
     
     
  3.     console.log(data)
    4. 
     
     
     
     
  4. }
    5. 
     
     
     
     
  5.  
    6. 
     
     
     
     
  6. logger()
    7.
このコードはあなたの予想通りに実行されていません.JSを書いたら、上のコードはなぜ予想通りに運行されないのか分かるかもしれません.
しかし、このコードは確かにあなたが望むものを作った.
    
    
    
    

     
     
     
     JavaScript   :
    
    
    
    

    
    
    
    
    
     
     
     
     
  1. async function logger() {
    2. 
     
     
     
     
  2.     let data = await fetch('http:sampleapi.com/posts')
    3. 
     
     
     
     
  3.     console.log(data)
    4. 
     
     
     
     
  4. }
    5. 
     
     
     
     
  5.  
    6. 
     
     
     
     
  6. logger()
    7.
直感的な(綺麗な)コードは正常に動作し、2つのキーワードだけを追加しました.
ES 6前の非同期JavaScript
私たちがasyncとawaitを深く勉強する前に、まずプロモーションを知る必要があります.promisesを理解するには、簡単なフィードバックが必要です.
ES 6にPromisesを導入し、JavaScriptにおいて非同期コードを作成することに大きな改良を加えました.いわゆる「回調地獄」がなくなり、私たちはPromisesに少しの親近感を覚えました.
コールバックは、結果を関数に伝達し、関数内で呼び出して、どのイベントにも応答する関数です.これはJSの基礎です.
    
    
    
    

     
     
     
     JavaScript   :
    
    
    
    

    
    
    
    
    
     
     
     
     
  1. function readFile('file.txt', (data) => {
    2. 
     
     
     
     
  2.   //       
    3. 
     
     
     
     
  3.   console.log(data)
    4. 
     
     
     
     
  4. }
    5.
この関数は単にファイルからデータを記録するだけで、ファイルが完成する前に読み込むことは不可能です.簡単に見えますが、5つの異なるファイルを順番に読み取って記録したい場合はどうすればいいですか?
Promisesが出現する前に、順番タスクを実行するために、以下のようにネストされたコールバックが必要です.
    
    
    
    

     
     
     
     JavaScript   :
    
    
    
    

    
    
    
    
    
     
     
     
     
  1. //           
    2. 
     
     
     
     
  2. function combineFiles(file1, file2, file3, printFileCallBack) {
    3. 
     
     
     
     
  3.     let newFileText = ''
    4. 
     
     
     
     
  4.     readFile(string1, (text) => {
    5. 
     
     
     
     
  5.         newFileText += text
    6. 
     
     
     
     
  6.         readFile(string2, (text) => {
    7. 
     
     
     
     
  7.             newFileText += text
    8. 
     
     
     
     
  8.             readFile(string3, (text) => {
    9. 
     
     
     
     
  9.                 newFileText += text
    10. 
     
     
     
     
  10.                 printFileCallBack(newFileText)
    11. 
     
     
     
     
  11.             }
    12. 
     
     
     
     
  12.         }
    13. 
     
     
     
     
  13.     } 
    14. 
     
     
     
     
  14. }
    15.
コードの理解と追跡は難しいです.これはまだ一つのファイルが存在しないなどのエラー処理を含んでいません.
Promiseはこの状況をもっと良くします.
この時Promiseが役に立ちました.Promiseは、まだ存在していないデータを推理する方法です.あなたが知らないJavaScriptシリーズの著者Kyle Simpsonは、非同期JavaScriptの講演で有名です.彼はPromiseに対して、ファストフードの店で注文したようです.
  • 注文します
  • はお金を払って領収書をもらいます.
  • 等食です
  • 食事ができたら、注文番号を教えてくれます.
  • 食事を取ります
    • 彼が指摘したように、あなたが食事を待つ時、あなたはあなたの昼食を食べることができません.でも、それを待ってもいいです.あなたの昼食の準備ができます.あなたが食事を待つ時、他のことをしてもいいです.今は料理を持っていなくても、この昼食はもう「promise」からあげました.これがPromiseというものです.一つはデータが最終的に現れることを示す対象です.
        
    
    
    
    
     
     
     
     JavaScript   :
    
    
    
    
    
    
    
    
    
      
     
     
     
     
    1. readFile(file1)
      2. 
     
     
     
     
    2.   .then((file1-data) => { /* do something */ })
      3. 
     
     
     
     
    3.   .then((previous-promise-data) => { /* do the next thing */ })
      4. 
     
     
     
     
    4.   .catch( /* handle errors */ )
      5.
    これはPromiseの文法です.行列イベントを直感的にリンクできるのが主な利点です.この例は分かりやすいですが、やはりコールバックを使いました.Promiseはシンプルで直感的なリピーターになります.
    ベスト(最新)方式:Async／Await
    数年前に、async関数はJavaScript生態系に組み込まれました.先月まで、async関数はJavaScript言語の公式機能となり、広く支持されました.asyncとawaitのキーワードは、ポインターとgeneratorに基づいて簡単にパッケージ化された.本質的には、私たちは必要な任意の位置でawaitキーワードを使って、「一時停止」関数を使用することができる.
        
    
    
    
    
     
     
     
     JavaScript   :
    
    
    
    
    
    
    
    
    
      
     
     
     
     
    1. async function logger() {
      2. 
     
     
     
     
    2.   //            
      3. 
     
     
     
     
    3.   let data = await fetch('http://sampleapi.com/posts')
      4. 
     
     
     
     
    4.   console.log(data)
      5. 
     
     
     
     
    5. }
      6.
    このコードはあなたの期待通りに実行されます.APIから呼び出しられたデータが記録されています.あなたがこれさえ困難を理解したら、どうすればいいか分かりません.
    このようにするメリットはとても直観的です.あなたは脳の思考でコードを作成し、必要な位置でコードを停止します.
    もう一つの利点は、promiseが使用できないtryとcatchを利用できることである.
        
    
    
    
    
     
     
     
     JavaScript   :
    
    
    
    
    
    
    
    
    
      
     
     
     
     
    1. async function logger ()  {
      2. 
     
     
     
     
    2.     try {
      3. 
     
     
     
     
    3.         let user_id = await fetch('/api/users/username')
      4. 
     
     
     
     
    4.         let posts = await fetch('/api/`${user_id}`')
      5. 
     
     
     
     
    5.         let object = JSON.parse(user.posts.toString())
      6. 
     
     
     
     
    6.         console.log(posts)
      7. 
     
     
     
     
    7.     } catch (error) {
      8. 
     
     
     
     
    8.         console.error('Error:', error) 
      9. 
     
     
     
     
    9.     }
      10. 
     
     
     
     
    10. }
      11.
    これは、意図的に誤った例であり、その証明のために、catchは、プロセス中に取り込まれた任意のステップで発生したエラーを証明する.少なくとも3つの場所tryが失敗する可能性があります.これは非同期コードの中で最も清潔な方法でエラーを処理します.
    ASync関数を使ってサイクルと条件を判断してもいいです.
        
    
    
    
    
     
     
     
     JavaScript   :
    
    
    
    
    
    
    
    
    
      
     
     
     
     
    1. async function count() {
      2. 
     
     
     
     
    2.     let counter = 1
      3. 
     
     
     
     
    3.     for (let i = 0; i < 100; i++) {
      4. 
     
     
     
     
    4.         counter += 1
      5. 
     
     
     
     
    5.         console.log(counter)
      6. 
     
     
     
     
    6.         await sleep(1000)
      7. 
     
     
     
     
    7.     }
      8. 
     
     
     
     
    8. }
      9.
    これは愚かな例ですが、これは予想通りに運行され、読みやすいです.この操作をコンソールで実行すると、コードはsleepを呼び出した時に停止され、次のループも一秒も待っていません.
    注意すべき細かい点
    今はもうasyncとawaitの素晴らしいところを確信しました.これからは詳細を詳しく調べます.
  • asyncおよびawaitは、プロミスに基づく.asyncの関数を使うと、プロミスオブジェクトに戻ります.この点はとても重要で、覚えておいてください.これはあなたが犯しやすいところです.
  • は、全セグメントコードではなく関数を一時停止した.
  • awaitおよびasyncは、非ブロッキングである.
  • は相変わらずawait、例えばPromiseを使用してもいいです.前の例のように、
    •     
    
    
    
    
     
     
     
     JavaScript   :
    
    
    
    
    
    
    
    
    
      
     
     
     
     
    1. async function logPosts ()  {
      2. 
     
     
     
     
    2.     try {
      3. 
     
     
     
     
    3.         let user_id = await fetch('/api/users/username')
      4. 
     
     
     
     
    4.         let post_ids = await fetch('/api/posts/${user_id}')
    5.         let promises = post_ids.map(post_id => {
    6.             return  fetch('/api/posts/${post_id}')
      7. 
     
     
     
     
    7.         }
      8. 
     
     
     
     
    8.         let posts = await Promise.all(promises)
      9. 
     
     
     
     
    9.         console.log(posts)
      10. 
     
     
     
     
    10.     } catch (error) {
      11. 
     
     
     
     
    11.         console.error('Error:', error) 
      12. 
     
     
     
     
    12.     }
      13. 
     
     
     
     
    13. }
      14.
  • awaitは、Promise.all()として宣言された関数にしか使用できません.
  • ですので、全体の範囲でasyncを使用することはできません.
    •     
    
    
    
    
     
     
     
     JavaScript   :
    
    
    
    
    
    
    
    
    
      
     
     
     
     
    1. //     
      2. 
     
     
     
     
    2. function logger (callBack) {
      3. 
     
     
     
     
    3.     console.log(await callBack)
      4. 
     
     
     
     
    4. }
      5. 
     
     
     
     
    5.  
      6. 
     
     
     
     
    6. //     
      7. 
     
     
     
     
    7. async function logger () {
      8. 
     
     
     
     
    8.     console.log(await callBack)
      9. 
     
     
     
     
    9. }
      10.
    今すぐ使えます.
    2017年6月までに、ほとんどのブラウザでawaitとasyncのキーワードが使用できます.あなたのコードがいつでも使えるようにするためには、Babelを使ってJavaScriptコードを古いブラウザにコンパイルしてもサポートする文法が必要です.
    ES 2017のより多くの内容に興味があるなら、ここで以下のES 2017の新しい特性の完全なリストを確認してもいいです.
  • Async Functions(非同期関数)
  • 共有メモリとAtomics
  • Object.entries()とObject.values()
  • 新しい文字列方法:padStartとpadEnd
  • Object.getOwn PropertyDescriptors()
  • 関数パラメータリストと、後述のカンマ
    • を呼び出します.
    ECMAScriptに関する最新の文章を読むことをオススメします.
  • ECMAScript 2015(ES 6)の十大特徴
  • JavaScript ES 6(ES 2015)入門-コア特性概説
  • ES 6新特性例大全
  • 今から使える5つのES 6特性
  • 対象向けJavaScript–ES 6クラス
    • を深く知る
  • ES 2017のAsync関数とAwait(待ち)
    • を使用する.
  • JavaScript ECMAScript 2015(ES 6)及びECMAScript 2016(ES 7)新特性速査表
  • ECMAScript 6 Modules(モジュール)システムと文法の詳細解
  • ES 2015の新しい特性を学ぶ
  • JavaScript ES 2015におけるオブジェクト継承モード
  • JavaScript新書:ES 2016とES 2017(ES 2016とES 2017の最新の特性を含む)を探索する
    • 原文のリンク:https://css-tricks.com/using-es2017-async-functions/
    express:「express」項目はcmdlet、関数、スクリプトファイル、または実行可能プログラムの名前として識別できません.express:command not found