JavaScript中对于 promise和async和await的理解

对于一段基于promise的异步操作，我们可以这样使用

 

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

function fn2 (value,ms){
  console.log('头')  
  fn1(ms).then((res)=>{
    console.log(value,'一个value',res,'返回值')
    console.log('尾巴')
  })
  
 }

fn2('输入值',2000)

　　

用async和await可以这样改写

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

async function fn2 (value,ms){
  console.log('头')  
  const result = await fn1(ms)
  console.log(value,'一个value',result,'返回值'）
  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对象

但是我们也想捕捉reject（失败）状态的话,可以考虑try,catch或者用返回promise的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)
  }
 }
// 或

async function fn2 (value,ms){
    console.log('头')  
    await fn1(ms).then((res) =>{}).catch((err) => {console.log(err)})
    console.log(value,'一个value')
    console.log('尾巴')
 }

fn2('输入值',2000)

//  头
//  --定时器内--,2000
//  报错——这里会有错误提示