JavaScript中對于 promise和async和await的了解

對于一段基于promise的異步操作，我們可以這樣使用

function fn1 (ms){
  return new Promise(
      (reslove) => {
        setTimeout(()=>{
        console.log('--定時器内--',ms)
        reslove()
      },ms)
    }
  )
}

function fn2 (value,ms){
  console.log('頭')  
  fn1(ms).then(()=>{
    console.log(value,'一個value')
    console.log('尾巴')
  })
  
 }

fn2('輸入值',2000)
      

　　

用async和await可以這樣改寫

async function fn1 (ms){
  await new Promise(
      (reslove) => {
        setTimeout(()=>{
        console.log('--定時器内--',ms)
        reslove()
      },ms)
    }
  )
}

async function fn2 (value,ms){
  console.log('頭')  
  await fn1(ms)
  console.log(value,'一個value')
  console.log('尾巴')
 }

fn2('輸入值',2000)

      

如果promise要進入reject（失敗）狀态

function fn1 (ms){  
　　return new Promise(
      (reslove,reject) => {
        let bool = false
        setTimeout(()=>{
        console.log('--定時器内--',ms)
        if(bool){
            reslove()
        }else{
            reject()
        }
      },ms)
    }
  )
}

function fn2 (value,ms){
  console.log('頭')  
  fn1(ms).then(()=>{
    console.log(value,'一個value')
    console.log('尾巴')
  }).catch(()=>{
      console.log('報錯——這裡會有錯誤提示')

})
  
 }

fn2('輸入值',2000)      

　  //　　頭

　 // 　　定時器内--,2000

　//　　 報錯——這裡會有錯誤提示

await隻能等待promise中resolve（成功）狀态

但是我們也想捕捉reject（失敗）狀态的話,可以考慮try,catch

async function fn1 (ms){
  await new Promise(
      (reslove,reject) => {
        let bool = false
        setTimeout(()=>{
        console.log('--定時器内--',ms)
        if(bool){
            reslove()
        }else{
            reject('報錯——這裡會有錯誤提示')
        }
      },ms)
    }
  )
}

async function fn2 (value,ms){
  try{
    console.log('頭')  
    await fn1(ms)
    console.log(value,'一個value')
    console.log('尾巴')
  }catch(err){
      console.log(err)
  }
 }

fn2('輸入值',2000)

//  頭
//  --定時器内--,2000
//  報錯——這裡會有錯誤提示