js面试题 异步解决方案

先来看这样一个异步问题

function getData(){
    //定时器模拟异步
    setTimeout(()=>{
      let res = "nihao"
    },100)

    console.log(res);   
    
}

getData()        //无结果

无法打印res的结果，因为打印语句比定时器内的内容要先执行

那要如何处理这样的异步任务呢？怎样能够得到异步任务执行完的结果再继续接下来的工作呢？

一、callback回调函数

回调函数是一种特殊的函数，它作为参数传递给另一个函数，并在被调用函数执行完毕后被调用

把 需要得到异步任务结果之后才能执行 的内容放进回调函数中，异步任务完成后 调用作为函数参数的callback

//callback
  function getData(callback){
    //定时器模拟异步
    setTimeout(()=>{
      callback("nihao")
    },100)

  }

  getData((res)=>{
    console.log(res)        //nihao
  })

二、Promise

1.Promise 三种状态：pending — resolve|reject

  function getPromise(){
    return new Promise((resolve,reject)=>{
      setTimeout(()=>{
        resolve("成功")
      },100)
    })

  }

  getPromise()
    //成功
    .then(
        (res)=>{console.log("成功啦",res)} )
    //失败
    .catch(
        (err)=>{console.log("error!",err)} )

2.Promise.all()

需要等待多个Promise的结果怎么办呢？

  function getPromise1(){
    return new Promise((resolve,reject)=>{
      setTimeout(()=>{
        resolve("1")
      },100)
    })
    
  }

  function getPromise2(){
    return new Promise((resolve,reject)=>{
      setTimeout(()=>{
        resolve("2")
      },100)
    })
    
  }

  function getPromise3(){
    return new Promise((resolve,reject)=>{
      setTimeout(()=>{
        resolve("3")
      },100)
    })
    
  }


  Promise.all([getPromise1(),getPromise2(),getPromise3()])
    .then(
        (res)=>{console.log("成功",res)} )
    .catch(
        (error)=>{console.log("失败",error)})

三、async await 

async可以单独使用，返回的是Promise对象

await不能独自使用，必须配合async使用，否则会报错

  function getPromise(){
    return new Promise((resolve,reject)=>{
      setTimeout(()=>{
        resolve("成功")
      },100)
    })
    
  }  


  async function get(){
    let result = await getPromise();
    console.log(result);
  }

  get()        //成功