javascript - async, await

asyncとawaitは約束を簡潔かつ同期させる.
async

function fetchUser(){

  // do network request in 10 secs
  return "dongha"
}

const user = fetchUser();

ユーザーのデータを受信するfetchUserという関数があり、10秒かかります.userという名前の変数が戻り値を割り当てる場合、同期実行には10秒かかります.(その間、JavaScriptエンジンは他の作業をしません)
これを約束に変えると.

function fetchUser(){

  // do network request in 10 secs
  return new Promise((resolve, reject))
}

const user = fetchUser();

promise 内部ではresolveとrequestは、コールバック関数を受信するコールバック関数を作成することを意味します.

function fetchUser(){
  // do network request in 10 secs
  return new Promise((resolve, reject) =>{
    resolve("dongha")
  })
}

const user = fetchUser();
user.then(console.log) // dongha

user変数は戻り値を受け入れるのでthenというコールバック関数を使用してコンソールに撮るとdonghaが出力されます.
async

async function fetchUser(){
  // do network request in 10 secs
return "dongha"
}

const user = fetchUser();
user.then(console.log) // dongha

functionの前にasyncと書いて、約束の効果と同じです!
await
awaitはasync付き関数でのみ使用できます.

function delay(ms){
  return new Promise(resolve => setTimeout(resolve, ms))
}
async function getApple(){
  await delay(3000)
  return "apple"
}

async function getBanana(){
  await delay(3000)
  return "banana"
}

delay関数は、msをパラメータとして受け入れ、msの後にresolveを呼び出すpromiseを返します.3秒が終わるまで待つ.つまり、3秒後には「apple」に戻る「promiss」が発生します.

function getBanana(){
  return delay(3000)
   .then(()=>"banana")
}

getBanna関数をpromiseを使用する関数に変更します.awaitを書くのは動機的で直感的に見えます.
pickFruts関数を作成してappleとバナナをインポートするとします.

function pickFruits() {
    return getApple()
        .then(apple => {
            return getBanana()
                .then(banana => `${apple} + ${banana}`)
        })
}

pickFruits().then(console.log) // apple + banana

約束が重なるとcallback地獄に似ています.asyncの使用

async function pickFruits(){
  const apple = await getApple()
  const banana = await getBanana()

  return `${apple} + ${banana}`
 
}

pickFruits().then(console.log) // apple + banana

asyncを関数の前に貼り付け、awaitを使用するとより簡潔になります.
エラーオカレンス

function getBanana(){
  return delay(3000)
   throw "error"
   return "apple"
}

async function pickFruits(){

  try {
    const apple = await getApple()
    const banana = await getBanana()
  } 
  catch() {}
  
  return `${apple} + ${banana}`
}

pickFruits().then(console.log) //  apple + banana

tryとcatchはエラーを制御できます!
待機パラレル処理
getApple関数は3秒遅延し、getApple関数は3秒遅延して実行されます.つまり、6秒はシリアル処理なので効率が悪い(何を言っているのかさっぱり分からない!)バナナは謝罪を受けることと関係がないので、待たずに同時に行うことができます!

async function pickFruits() {
 const applePromise = getApple()
 const bananaPromise = getBanana()
 
 const apple = await applePromise
 const banana = await bananaPromise
    
 return `${apple} + ${banana}`
}

pickFruits().then(console.log) // apple + banana

ApplePromiseとbanaPromiseは変数を作成しgetApple()を割り当てます.つまり、すぐに約束を果たすということです.その後awaitでapple変数と同期し、2つの関数を並列に実行し、3秒以内に完了します.
上の状況は簡潔に書くことができます.

function pickAllFruits() {
    return Promise.all([getApple(), getBanana()]).then(fruits => fruits.join(' + '))
}
pickAllFruits().then(console.log) // apple + banana apple + banana

allはapiであり、promise配列を渡すだけで、すべてのpromise受信を並列に待つことができる.

function pickOnlyOne(){
  return Promise.race([getApple(), getBanana()] )
}
pickOnlyOne().then(console.log) // apple

raceは、配列形式で受け取った約束を伝えています.
ソース:https://www.youtube.com/watch?v=aoQSOZfz3vQ&list=PLv2d7VI9OotTVOL4QmPfvJWPJvkmv6h-2&index=13