コードの最初の
一般的なコード
function getData(data, time) {
return new Promise(function (resolve, reject) {
setTimeout(function () {
resolve(data);
}, time)
})
}
let results = [];
let startTime = new Date();
laucher();コードセグメント
async function laucher() {
let dataA = await getData('a', 2000);
results.push(`${dataA}在${new Date() - startTime}毫秒放入`);
let dataB = await getData('b', 3000);
results.push(`${dataB}在${new Date() - startTime}毫秒放入`);
let dataC = await getData('c', 1000);
results.push(`${dataC}在${new Date() - startTime}毫秒放入`);
console.log(results, `输出时间${new Date() - startTime}毫秒`);
}
輸出
["a在2002毫秒放入", "b在5004毫秒放入", "c在6006毫秒放入"] "输出时间6006毫秒"2つのコード・セグメント
async function laucher() {
let dataAPromise = getData('a', 2000);
let dataBPromise = getData('b', 3000);
let dataCPromise = getData('c', 1000);
let promises = [dataAPromise, dataBPromise, dataCPromise];
results = await Promise.all(promises);
console.log(results, `输出时间${new Date() - startTime}毫秒`);
}輸出
["a", "b", "c"] "输出时间3006毫秒"スニペット3
async function laucher() {
let dataAPromise = getData('a', 2000);
let dataBPromise = getData('b', 3000);
let dataCPromise = getData('c', 1000);
dataA = await dataAPromise;
results.push(`${dataA}在${new Date() - startTime}毫秒放入`);
dataB = await dataBPromise;
results.push(`${dataB}在${new Date() - startTime}毫秒放入`);
dataC = await dataCPromise;
results.push(`${dataC}在${new Date() - startTime}毫秒放入`);
console.log(results, `输出时间${new Date() - startTime}毫秒`);
}輸出
["a在2003毫秒放入", "b在3001毫秒放入", "c在3001毫秒放入"] "输出时间3002毫秒"スニペット4
async function laucher() {
let dataAPromise = getData('a', 2000);
let dataBPromise = getData('b', 3000);
let dataCPromise = getData('c', 1000);
(async () => {
dataA = await dataAPromise;
results.push(`${dataA}在${new Date() - startTime}毫秒放入`);
})();
(async () => {
dataB = await dataBPromise;
results.push(`${dataB}在${new Date() - startTime}毫秒放入`);
console.log(results, `输出时间${new Date() - startTime}毫秒`);//results放在最后返回的请求中
})();
(async () => {
dataC = await dataCPromise;
results.push(`${dataC}在${new Date() - startTime}毫秒放入`);
})();
}輸出
["c在1002毫秒放入", "a在2002毫秒放入", "b在3003毫秒放入"] "输出时间3003毫秒"概要
2000,3000,1000 MS、「」、「B」にそれぞれ復帰後3つの非同期要求、シミュレート使用してのsetTimeout 「C」を、
第1の方法はよくことが理解される、ステップバイステップが行われ、この方法は、パラメータに依存要求に適しています要求はこの関係が存在しない場合、の値を返すこと、すなわち、このアプローチの効率は、ここでは比較的低いです。
第二の方法の発端は、3つの要求を開始し、3件のリクエストが到着した後、取得データを待っています。
第三の方法は、要求到達時間、次いで2秒、要求が到着すると、プッシュ結果の結果、実装ダウン、Bであるため、起動要求は、到着3を開始し、順次要求で実行さも1秒プッシュBの結果,, Cの別の結果は、1秒の要求、このときCは既に直ちにこのラウンドサイクルの終わりに到着された後、要求は、3秒、要求Bの一つの第二の要求が後で到着していますプッシュC。要求されたデータの復帰は、この方法が速い第二の方法よりもデータを処理することができ、2秒間作動させることができます。要求は、時間の降順である場合、効果は同じであり、第二の方法は、一般的に複数の要求があるいかなる場合がありません。
第四差分法と第三の方法は、結果セットの中に最速の要求に到達する最初である要求は、Cにデータを返すためにならば、私は、最初に処理されたデータを私にデータを返す、処理されるのを待っているラインアップしていません私は2回目以降の処理を開始することができるようになります、プロセスに長い時間がかかりますが、第三の方法の後に私が始めるために3秒を持っています。また、私は、要求が到着する関数bの出力に結果を見ることができ、完全な出力差に到達するために、最後の要求後の結果、および3つの方法は、操作の結果が非同期で取得することですので、これは非常に重要であり、方法3つの最大の違いは、関数から外層を巻き付けることによって行うことにより、取得された3同時演算結果を開始し、動作のawait右外laucherバウンスを防止することができます。私は最終的に結果の最終的な値を取得する方法を、到着要求しているかわからない場合我々は疑問であってもよく、Promise.allアウトこのような状況の缶パンは、以下の二つの機能を区別慎重に見ることができます
async function laucher() {
let dataAPromise = getData('a', 2000);
let dataBPromise = getData('b', 3000);
let dataCPromise = getData('c', 1000);
let promises = [dataAPromise, dataBPromise, dataCPromise];
results = await Promise.all(promises);
console.log(results, `输出时间${new Date() - startTime}毫秒`);
}輸出
["a", "b", "c"] "输出时间3003毫秒" async function laucher() {
let dataAPromise = getData('a', 2000);
let dataBPromise = getData('b', 3000);
let dataCPromise = getData('c', 1000);
let promises = [dataAPromise, dataBPromise, dataCPromise];
results = await Promise.all(promises.map(async function (promise) {
let data = await promise;
console.log(`${data}在${new Date() - startTime}毫秒输出`);
//这里可以提前处理数据
return data
}));
console.log(results);
}輸出
c在1002毫秒输出
a在2003毫秒输出
b在3003毫秒输出
["a", "b", "c"] "输出时间3004毫秒"効率のために押して、要求は、二次の関係との間に存在せず、要求に達するには、いくつかの操作を実行する場合は
方法4>方法3>方法2>方法1
シーンを使用する戦略をロードするこれらの方法の各々例示するために、ページは、背景へのコンポーネント（構成要素の数は3であると仮定）にロードされる
実行フロー：
方法：モジュール1を開始する要求 - >組立データ到着が部品1をレンダリング - >組立開始要求2 - >アセンブリ2データの到着が2成分レンダリング - レンダリングアセンブリ3データ到着> - >コンポーネントリクエスト3を開始しますコンポーネント3
方法2：同時にアセンブリ1,2,3要求を開始 - データ・コンポーネントに到達した後1,2,3 1,2,3コンポーネントをレンダリングしています>
方法3：同時にアセンブリ1,2,3要求を開始 - >アセンブリ1に達する成分データ1をレンダリング - > 3成分データの到着は、成分3をレンダリング - た後、アセンブリ> 2つのデータと、成分2をレンダリング到来
方法4：同時にアセンブリ1,2,3を要求を開始 - 第二成分のデータに達するには、コンポーネントが第二の高速の到着後、到着したレンダリング高速化> - - >最速の到着に到着コンポーネントのデータが最速の到着コンポーネントのレンダリング>最も遅い成分のデータは、到着の最も遅いコンポーネントをレンダリング到達した後に到着します
上記のシナリオについてFOURは最速のが私たちのページのコンテンツをレンダリングすることができます見ることができます
遂に
いくつかの記事はforEachのを指摘します：次のコードでは、1ポイントを追加（出力を推測することができ、あなたは非常に簡潔なコードを作ることができますが、非同期/のawait実行プロセス自体は非常に複雑で、非同期/のawaitの導入にもかかわらず、見ることができます関数は、非同期操作を配置することができない、この結論はそれがなく、関係に本当に二次でのforEachに不適切な場合、間違っている）彼らは、非同期操作を置くことはできませんが、この操作は、データへのアクセスの効率を向上させることができること
[1, 2].forEach(async function (value) {
console.log(value);
await console.log('a');
console.log('c');
await console.log('d');
console.log('e');
})
console.log(3);