JavaScriptでの非同期/待機。 側面図

最近、私の友人、同僚、コミュニティの人々の多くが非同期機能の使用、特にプロジェクトでの非同期/待機の使用について話している。 私はそれがどんな動物なのか、そしてそれが戦闘プロジェクトの開発に使用されるべきかどうかを自分で決めることにしました。



私が最初に払拭したいのは、非同期/待機がES7の機能であるという一般的な誤解です。



私の意見では、ES6およびES7という用語の使用自体はあまり真実ではなく、開発者を混乱させる可能性があります。 ES6と呼ばれるES2015仕様が正常にリリースされた後、多くの人々は、すべてがそれに入らず、 バベルを通じて封印されたという誤った意見を抱きました。これらはES7の機能です。 そうではありません。 ES2016仕様のリリースで表示される内容のリストを次に示します。 ご覧のとおり、サイズはそれほど大きくなく、async / awaitはまったく表示されません。



正しく話してほしい。 そして、この機能またはその機能について言えば、彼らは、架空のES6、ES7 ... ESNではなく、それが記述され実装されているフレームワークの特定の仕様を参照しました。

先に進みます。 それでは、単純な言葉で非同期/待機とは何ですか？

公用語で話すasync / awaitはPromiseです。



関数を非同期として宣言するとき、マジックワードasyncを使用して、関数がPromiseを返すと言います。 マジックワードawaitを使用してこの関数内で期待するものはすべて、Promiseを返します。



これは、そのような関数がどのように機能し、それらを使用するときに何を期待するかを理解するための非常に重要なポイントです。

ユニコーンがどのように見えるか、そしてどのように機能するかを見てみましょう。

キャビネットを終了する非同期Reduxアクションの簡単な例を次に示します。

export function logout(router) { return async (dispatch) => { try { const {data: {success, message}} = await axios.get('/logout'); (success) ? dispatch({ type: LOGOUT_SUCCESS }) : dispatch({ type: LOGOUT_FAILURE, message }); } catch (e) { dispatch({ type: LOGOUT_FAILURE, e.data.message }); } }; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

今、一般から特定へ

いくつかの記事を読んで自分で遊んだ後、私は簡単な短いブリーフを作成し、小さな例を挙げて主要な質問に答えました。

始めるには何をする必要がありますか？

ビルドシステムを使用しない場合は、単にbabelとbabel-runtimeをインストールしてください。

 babel test.js -o test-compile.js —optional runtime —experimental
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

それ以外の場合は、ビルドシステムとbabelバージョンに基づいて設定を確認することをお勧めします。 babel5とbabel6の設定は非常に異なるため、これは非常に重要です。

非同期関数はどのように作成されますか？

 async function unicorn() { let rainbow = await getRainbow(); return rainbow.data.colors }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

非同期関数の作成は、2つの主要な部分で構成されています。



1.関数を宣言する前にasyncという単語を使用します。



logout（）の例からわかるように、これは矢印関数を使用するときにも機能します。 これは、クラス関数と静的関数でも機能します。 後者の場合、非同期は静的の後に書き込まれます。



2.関数自体の本体では、awaitという単語を使用する必要があります。



単語awaitの使用は、メインコードが待機し、何らかのアクションが実行されるまで応答を返さないことを示します。 Promiseを処理し、解決または拒否を返すまで待機します。 したがって、コードは同期的に実行されるようです。



* awaitを使用するには、関数が非同期であり、asyncキーワードを使用して宣言されている必要があります。 それ以外の場合は、機能しません。

awaitはどのように機能し、どの機能を実行しますか？

前述のように、awaitはPromiseを期待しています。 Promiseオブジェクトの動作との類似性を描くと、awaitはその.then（）メソッドとまったく同じ機能を実行すると言うことができます。 唯一の大きな違いは、結果を受け取って処理するためにコールバック関数を必要としないことです。 これにより、コードは同期的に実行されるようです。

さて、もしawaitがPromiseの.then（）に類似している場合、どうすれば例外をキャッチして処理できますか？

 async function unicorn() { try { let rainbow = await getRainbow(); return rainbow.data.colors; } catch(e) { return { message: e.data.message, somaText: '     ' } } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

コードは同期スタイルであるため、このため、古き良きtry / catchを使用してこのような問題を解決できます。



さらに、これにも焦点を当てたいと思います。







try / catchを使用することが、エラーをキャッチして処理する唯一の方法です。 何らかの理由でそれを使用しない、または単に忘れた場合、これは処理能力の欠如と損失につながる可能性があります。

awaitに続くコードはどの時点で実行されますか？

 async function unicorn() { let _colors = []; let rainbow = await getRainbow(); if(rainbow.data.colors.length) { _colors = rainbow.colors.map((color) => color.toUpperCase()); } return _colors; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

awaitに続くコードは、awaitで使用される関数がresolveまたはrejectを返す場合にのみ実行を続けます。

awaitで使用される関数がPromiseを返さない場合はどうなりますか？

awaitで使用される関数がPromiseを返さず、awaitがそれを期待していることが既にわかっている場合、awaitをまったく使用していないかのようにコードの実行が続行されます。

関数を非同期で宣言し、awaitを使用しない場合はどうなりますか？

 async function unicorn() { let rainbow = getRainbow(); return rainbow; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

この場合、出力はPromise関数getRainbow（）への単なるリンクになります。

awaitを連続して使用して複数の関数を作成するとどうなりますか？

 async function unicorn() { let rainbow = await getRainbow(); let food = await getFood(); return {rainbow, food} }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

このようなコードは順番に実行されます。 最初にgetRainbow（）が機能し、resolveまたはrejectを返すとgetFood（）が機能し始めます。 1つの課題、1つの結果。

そして、複数の呼び出しから同時に結果を取得する必要がある場合はどうなりますか？

 async function unicorn() { let [rainbow, food] = await Promise.all([getRainbow(), getFood()]); return {rainbow, food} }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

Promiseを扱っていることがすでにわかっているので。 したがって、メソッドを使用できます。 この種の問題を解決するためのPromiseオブジェクトのすべて（） 。



さらに、await * arrayOfPromisesコンストラクトはもはや関連性がなく、仕様から削除されていることに注意してください。 使用しようとすると、Promise.all（）を使用した方がよいというメッセージが表示されます。



メッセージの例：

  await* has been removed from the async functions proposal. Use Promise.all()
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

await *設計情報を更新しました。 xGromMxとdegorovに感謝します。

仕事を成功させるために他に知っておくべきことはありますか？

 async function getAllUnicorns(names) { return await Promise.all(names.map(async function(name) { var unicorn = await getUnicorn(name); return unicorn; })); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

プロジェクトでasync / awaitの使用を開始する場合、スタックのほとんどすべてが非同期でなければならないという事実に備える必要があることを覚えておく必要があります。 そして、これはかなりの問題と不便を追加します。



すべてのようです。



理解できないものが残っている場合、または補足するものがある場合、主要な理論的側面を把握しました。コメントをお待ちしています。



そして私にとっては、すべての情報を収集し、非同期ユニコーンで何をすべきかを決定する時です。 リリース旅行に連れて行くか、ペットプロジェクトのために家を出る。

結論：

一見、非同期機能はポジティブな感情を引き起こします。 あなたのコードを同期的に似たものにし、より簡潔で読みやすくする、このようなかわいい小さなもの 。



しかし、これは一見したところです。



はい、コードは簡潔で読みやすいです。 はい、きれいに見えます。 しかし、通常のAPIや複雑な相互接続スクリプトよりも複雑なもの（データベースを操作するためのタスクキューなど）を作成しようとすると、すぐに非同期スタックの問題が発生します。



ほとんどすべての環境に優しいブラウザは、そのままでES2015の機能をサポートしています（93％-98％）（ 表 ）。 私にとって、これは、要件とスタックに基づいて新しいプロジェクトを開始することを意味します。プロジェクトでのbabelの必要性についてはすでに考えています。



しかし、async / awaitを使用することにした場合、babelを使用する必要があります。 そして、これが私のコードに美しさを加えるとは言えません。 結局のところ、公式には非同期/待機はなく、それがまったく行われるかどうかは不明です。 そして、これは私にとって大きなマイナスです。



また、自動的にエラーにクラッシュするのではなく、awaitを使用するのを忘れた場合や、適切なコピーアンドペーストを使用しなかった場合、Promiseへのリンクしか得られないという事実も嫌いです。 これは、特に複数の開発者がいる大規模なプロジェクトの場合、結果を伴う可能性があります。



そして最後の1つ。



async / awaitを使用するほとんどのタスクは、 ジェネレーターを使用して完全に解決されます。



まず、より良いサポートがあります。

第二に、発電機の動作がより自然で予測可能になります。

第三に、babel自体が、このようなコードを特別な設定example1 、 example2のジェネレーターに導きます。

NodeJSでのサポート

非同期/待機はすでに実験的にV8にヒットしています。 つまり、バージョンnodejs 7からは、そのまま使用してすぐに操作できます。

方法：

 NVM_NODEJS_ORG_MIRROR=https://nodejs.org/download/nightly nvm install 7 nvm use 7 node --harmony-async-await app.js
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

合計

最初に尋ねた質問に答えます。

非同期関数を使用する場合、主にAPIを記述するために、Petプロジェクトでのみ使用し、非常に大きなワーカーでは使用しません。 少なくともすべてが標準化され、実験的にフラグの下に置かれるまでは。



たとえば、Reduxのアクションゲームでそれらを使用するのが好きでした。 すべてが美しく調和しています。



私は、興味のある質問に対処するために、この資料を主に自分用に書きました。 この資料がまだ誰かに役立つなら、私はとても幸せです。



また、次の記事では、非同期（コールバック、約束、ジェネレーター、アトム）の実装に対するさまざまなアプローチを詳細に比較したいと思います。 これを教祖だけでなく、javascriptで始めたばかりの人々にも明らかにする。



ご清聴ありがとうございました。 頑張って