Javascript - async await vs promiseコールバック

Question

.then（func {}）スタイルのコードを非同期待ちに変換するコードを変更しています。

私の例では、async awaitに変換すると、APIに並行してクエリを実行する機能が削除され、2つの要求が互いに独立しているため、リクエストが終了した順に処理されます。

これは2つの構文の間で有効な違いですか、または2つの関数を2つの個別の非同期関数に分解して、の並列をで実行するかどうかですか？アップグレード前

サンプルコード：アップグレード後

componentDidMount() { 
 
    this.loadLists(); 
 
} 
 

 
loadLists() { 
 
    console.log('start 1'); 
 
    api.get('/url/1').then(function(r) { 
 
    console.log('done 1', r.body); 
 
    }); 
 
    
 
    console.log('start 2'); 
 
    api.get('/url/2').then(function(r) { 
 
    console.log('done 2', r.body); 
 
    }); 
 
} 
 

 
//OUTPUT 
 
//start 1 
 
//start 2 
 
//done 1 
 
//done 2

サンプルコード：

componentDidMount() { 
 
    this.getLists(); 
 
} 
 

 
async getLists() { 
 
    console.log('start 1'); 
 
    var res = await api.get('/url/1'); 
 
    console.log('done 1', res.body); 
 
    console.log('start 2'); 
 
    var res2 = await api.get('/url/2'); 
 
    console.log('done 2', res2.body); 
 
} 
 

 
//OUTPUT 
 
//start 1 
 
//done 1 
 
//start 2 
 
//done 2

EDIT：関数は2、async loadList1()に分割されている場合は、async loadList2()

は（ほぼ）同時に提出された2つの要求をもたらすこと、言葉await適切な使用せずに両方の機能を呼び出していますか？

Answer 1

awaitはを待っする責任があります。あなたが常にres2前resを処理しようとしているので、まだいくつかの連続的な依存関係を紹介

console.log('start 1'); 
var res = api.get('/url/1'); 
console.log('start 2'); 
var res2 = api.get('/url/2'); 
console.log('done 1', (await res).body); 
console.log('done 2', (await res2).body); 

しかし、もちろんの：あなたが要求を並列に実行したい場合は、単にそれらの両方のキックとawaitその後、それらをできました。

さらに電話がある場合は、まだPromise.allがあります。覚えておいてください、async/awaitは、約束を作り、解決するための文法的な砂糖です。

Answer 2

最初のコードでは、APIコールタスクの完了後にthenブロック内のタスクのみが実行されますが、他のコード行が実行されます。 2番目のAPI呼び出しでも同様です。 2番目のコードで

、

var res = await api.get('/url/1'); 

のawait API呼び出しのブロックそのジョブが完了されていない限り、それが実行されるの後に任意のコード。

Answer 3

componentDidMount() { 
    this.getLists(); 
} 

async getLists() {  
    const data = await Promise.all([api.get('/url/1'),api.get('/url/2')]); 
    console.log('1st API Response ----> ',data[0].body); 
    console.log('2nd API Response ----> ',data[1].body); 
} 

これで、両方を並行して実行することができます。 Promise.all([])です。 Promise.allが約束を返して以来、あなたはそれを待つことができます。

あなたは次の操作を行うことができますtry/catchブロック

Answer 4

であなたの関数をラップすることを忘れてはいけないしてください：約束が解決されるまで

async function getLists() { 

    const [res, res2] = await Promise.all([ 
    api.get('url/1'), 
    api.get('url/2') 
    ]) 

}