こんにちは、私は我々が仕事や研究の過程で、非同期の状況に遭遇するためにバインドされていると信じているので、今日は、フロントエンドの非同期処理ソリューションの開発についてお話します。
まず、どのようなフロントエンド非同期処理プログラムがあるか見てみましょう。
Callback
Promise
Generator
async/await
実装と長所と短所
Callback
setTimeout(function(){
// コールバック関数
},3000);
長所：
- コールバック関数は、初期の非同期処理ソリューションとして、同期の問題を解決することに成功しました。
欠点：
- コールバック関数の地獄は、コールバック関数にネストされたとき、徐々に増加の数は、コードのカップリングが増加し、コードの影響によって引き起こされるコードを変更すると、コードが大きくなり、プログラムの増加の難しさを理解することは非常に維持することが困難になります。
- try/catchで例外をキャッチすることはできませんし、また戻り値は何の効果もありません。
Promise
PromiseはES6で提案された非同期ソリューションで、resolveを呼び出すとPromiseの状態をpendingからfullfilledにすることができ、その後の処理の成功は.thenで行うことができます。一方、Promiseは内部例外も自動的にキャッチし、catchで処理することができます。
new Promise(function(resolve,reject){
resolve('success'); // コールバックを成功させる
//reject('error'); //失敗コールバック
//throw new Error('auto catch'); //例外を投げる
})
.then(function(res){
console.log(res); // success
})
.catch(function(error){
console.log(error); // error});
長所：
- コールバック関数のネストによって引き起こされるコールバック地獄は、連鎖した呼び出しによって解決されます。
- 例外処理は .catch で行います。
- .thenコールバック関数でPromiseを返し、.thenで処理を続けることができます。
欠点：
- Promiseキャンセルできません
- .thenへの呼び出しが多すぎると、thenの羅列になり、ロジックを理解するのが難しくなります。
Generator
GeneratorはES6で提案されたもう一つの非同期ソリューションで、関数と非常によく似ていますが、関数の関数名の前に*記号を追加する必要があり、内部でyieldを使用することができます。通常、関数は戻り値しか持ちませんが、Generatorの各yieldは戻り値にすることができます。関数が終了しない後、yieldは単なるブレークポイントであり、あなたは連続的なアクセスを行うためにGeneratorが提供するnext()メソッドを使用することができます、next()メソッドは、Generator内のコードを実行し、その後、yieldに遭遇するたびにオブジェクト{値:xxx,done:true/false}を返します。"一時停止 "します。戻り値の done は、この Generator が終了したかどうかを示すために使用されます。
function* myGenerator(){
yield 'ブレークポイント1';
yield 'ブレークポイント2';
return '終わりに;
}
const generator = myGenerator();
const generator1 = generator.next();
console.log(generator1); // {value: "ブレークポイント1", done: false}
const generator2 = generator.next();
console.log(generator2); // {value: "ブレークポイント2", done: false}
const generator3 = generator.next();
console.log(generator3); // {value: "おわり", done: true}
const generator4 = generator.next();
console.log(generator4); // {value: undefined, done: true}
長所：
- は関数の実行を制御することができます。
- コールバック地獄の問題を解決。
欠点：
今のところ大きな欠点はないようです。
async/await
async/awaitは今のところ、非同期処理のための究極のソリューションです。waitは実際にはGeneratorとPromiseの構文糖であり、waitの戻り値はPromiseであり、Generatorに基づくwaitの内部実装は自己実行型Generatorです。
async function test(){
const test1Value = await test1();
console.log(test1Value);
await test2();
await test3();
}
function test1(){
return new Promise((resolve)=>{
setTimeout(()=>{
console.log('test1 success');
resolve();
},3000);
});
}
function test2(){
setTimeout(()=>{
console.log('test2 success');
},2000);
}
function test3(){
return new Promise((resolve)=>{
setTimeout(()=>{
console.log('test3 success');
resolve();
},1000);
});
}
test();
// test1 success
// test3 success
// test2 success
あなたは、上記のコードは、非同期コードを記述するために同期の形で実装されていることがわかりますが、test2の代わりにtest3が最初に返されることがわかりますが、これはawaitの戻り値でのみPromiseが成功または失敗の状態を待機するためです。
長所：
- 明快な構成、簡単でシンプルな文章。
- コールバック地獄の解決
欠点：
- awaitは後続のコードの実行をブロックするため、標準的な方法でawaitを使用しないと、パフォーマンスに何らかの影響を与える可能性があります。
まとめ：
以上、4つのオプションで非同期処理の問題を解決しましたが、JavaScriptはシングルスレッド言語であることは周知の事実ですので、どのような方法で非同期機能を実現するかは、今後の予測として、次回の記事をお待ちください。
