非同期待機関数と setTimeout アプリケーションの問題

シーン

async await 関数はジェネレーター関数の糖衣構文であり、同期構文で非同期ステートメントを実行するとみなすことができ、Promise の連続呼び出しによって引き起こされるコールバック地獄の問題を解決します。

一般的な作業では、継続的なリクエスト インターフェイスが必要な場合に、async await 構文シュガーをよく使用します。しかし、呼び出される 2 番目のインターフェイスを遅らせる必要がある場合、多くの学生は何をすればよいのか分からず、強制的に .then ネスト形式に戻すしかありません。

よくある書き込み

非同期待機を使用しない一般的な書き込み:

init(){
  axios.get('xxxx').then(res => {
    if(res.code === 0){
       setTimeout(() => {
         axios.get('xxxx').then(res => {
           //最终的处理
         }
       },1000)
    }
  })
}

async await の糖衣構文がないと、実際には綿のズボンを次々と履いているおばあちゃんのようで、可読性が非常に悪いことがわかります。

解決

コード上で直接

エラーコード：

async init(){
  try {
    let count = 0
    const res = await axios.get('xxxx')
    console.log('1')
    count ++ 
    setTimeout(async () => { 
      const res2 = await axios.get('xxx')
      console.log('2')
      count ++ 
    })
    console.log('3')
    console.log('count':count)
  }catch(err){}
}

//打印输出  1  3  count:1 2

正しいコード:

async init(){
  try {
    let count = 0
    const res = await axios.get('xxxx')
    console.log('1')
    count ++
    const res2 = await new Promise(async function (resolve, reject) {
      console.log('2')
      setTimeout(async () => { 
        const res3 = await axios.get('xxx')
        console.log('3')
        count ++ 
        resolve(res3)
      })
    })
    count ++
    console.log('4')
    console.log('count:',count)
    if(res2.code === 0){
      //最后的处理
    }
  }catch(err){}
}

//打印输入。1  2  3  4   count:3

注意点：

• setTimeout のコールバック関数は非同期で実行されるため、async await 関数の本体で setTimeout の同期実行を制御できるように、promise でラップする必要があります。
• setTimeout 内でリクエストを送信し続けたいため、コールバック関数の前に async を追加する必要もあります。