async/awaitは非同期操作を同時に実行させる方法を詳しく説明します。


はじめに
私たちはよくこのようなトラブルに遭います。複数の関数は順番に実行しますが、結果は私たちの予想した順序ではありません。なぜなら、非同期の操作によって引き起こされるものです。ですから、非同期の操作によって、この問題を処理する解決策が必要です。
二.非同期操作はどんな問題をもたらすか?
非同期操作は多くの問題があるかもしれません。以下はよく見られる二つの種類です。
1.関数が実行した結果は、順番に戻ります。

function fn1(){
 console.log(111)
 setTimeout(function(){
  console.log('wait me 3000')
 },3000)
}
function fn2(){
 console.log(222)
}
fn1();
fn2();
//結果
//111
//222
//wait me 3000
上のコードは、もしあなたが期待している結果は
//111
//wait me 3000
//222
これは間違っています。fn 1関数にはもう一つの関数setTimeoutがあります。この二つの関数は非同期で実行されます。fn 1とfn 2は同期で実行されます。fn 1を先に実行してからfn 2を実行します。fn 1を実行するときに結果111を印刷し、3秒後にsetTimeoutを実行しますが、この3秒前にfn 2を実行しました。
setTimeout関数の設定待ち時間が長いからですか?じゃ、時間を0に設定します。

function fn1(){
 console.log(111)
 setTimeout(function(){
  console.log('wait me 3000')
 },0)
}
function fn2(){
 console.log(222)
}
fn1();
fn2();
//  
//111
//222
//wait me 3000
結果的には変更されていません。これはsetTimeoutという関数です。実行する前に実行列を確認します。列に並んでいる人がいるかどうかを確認します。もしあるなら、他の関数を実行してから実行します。だから、設定時間が0でも、最後の実行を変更しません。
2.外部では非同期関数の値を取得できません。
次に簡単な例を見ます。私の需要はfn 1関数の外でmsgを印刷します。

function fn1(){
 setTimeout(function(){
  msg='wait me 3000';
 },3000);
}
fn1();
では、msgはどうやって取得できますか?
コールバック関数を使う

function fn1(callback){
 setTimeout(function(){
  msg='wait me 3000';
  callback(msg);
 },3000);
}
fn1(data=>{
 console.log(data);//wait me 3000
});
Promiseを使う

function fn1(){
 return new Promise(function(res,rej){
  setTimeout(function(){
   msg='wait me 3000';
   res(msg);
  },3000);
 })
}
fn1().then(data=>{
 console.log(data)
})
三.async/awaitソリューション
async/awaitの役割は非同期的に実行することです。
非同期化?
Promiseのthen()を使って実現できますが、async/awaitとそれの違いは何ですか?
1.async関数はPromiseオブジェクトを返します。
一つの関数にasyncのキーワードを加えると、この関数はまた戻り値があります。この関数を呼び出すと、関数の実行が成功すれば、内部でPromise.soliveメソッドを呼び出してPromiseオブジェクトに戻ります。関数の実行に異常があれば、Promise.reject()方法を呼び出してpromiseオブジェクトに戻ります。
async関数の実行結果を取得するには、Promiseのthenまたはcatchを呼び出して、それにコールバック関数を登録します。

async function fn(){
 return '111'
}
console.log(fn());//Promise { '111' }
Promiseオブジェクトである以上、then()を使って結果を取得することができます。

async function fn(){
 return '111'
}
fn().then(data=>{
 console.log(data)//111
})
2.await
上ではasyncの役割を紹介しましたが、asyncとawaitは協力して使えば異歩操作を同期させることができます。awaitは待つという意味です。ある関数が終わったら、後のコードが実行されます。

function fn1(){
 return new Promise(resolve=>{
  setTimeout(function(){
   msg='wait me 3000';
   resolve(msg)
  },3000);
 });
}
async function asyncCall(){
 var result=await fn1();
 console.log(result); 
}
asyncCall();
もし私たちがfn 1の実行を待っていなかったら、resultをプリントしたらundefinedになる可能性があります。
四.まとめ
多くの場合、同期方式で非同期関数の結果を取得したいと思います。例えば登録する時、私達はバックグラウンドで成功した情報を返してからページジャンプをしなければならないので、非同期操作を同期化させることが重要な知識点です。しかし、このプログラムはPromiseベースの上にあります。Promiseに対して十分な理解が必要です。
はい、以上はこの文章の全部の内容です。本文の内容は皆さんの学習や仕事に対して一定の参考学習価値を持つことを望んでいます。ありがとうございます。