异步处理方案

目录

1.通过promise的链式调用将异步方法变为同步执行

2.使用async及await

3.回调函数方式

4.三种方式对比

 5.async及await使用的注意点

---

1.通过promise的链式调用将异步方法变为同步执行

function get1(){
  return new Promise((resolve,reject) =>{
    console.log('执行get1接口逻辑')
    setTimeout(() =>{
      if(flag.value){
        resolve('get1接口执行完成')
      }else{
        reject('get1接口执行失败')
      }
    },3000)

  })

}

function get2(){
  return new Promise((resolve,reject) =>{
    console.log('执行get2接口逻辑')
    setTimeout(() =>{
      if(flag.value){
        resolve('get2接口执行完成')
      }else{
        reject('get2接口执行失败')
      }
    },2000)

  })

}
function get3(){
  return new Promise((resolve,reject) =>{
    console.log('执行get3接口逻辑')
    setTimeout(() =>{
      if(flag.value){
        resolve('get3接口执行完成')
      }else{
        reject('get3接口执行失败')
      }
    },2000)

  })

}
function get4(){
  return new Promise((resolve,reject) =>{
    console.log('执行get4接口逻辑')
    setTimeout(() =>{
      if(flag.value){
        resolve('get4接口执行完成')
      }else{
        reject('get4接口执行失败')
      }
    },2000)

  })

}
// 进行get1-get4方法的顺序执行
get1()
.then(res=>{
  console.log(res);
  return get2()
})
.then(res=>{
  console.log(res);
  return get3()
})
.then(res=>{
  console.log(res);
  return get4()
})
.then(res=>{
  console.log(res);
})

执行结果：

2.使用async及await

function get1(){
  return new Promise((resolve,reject) =>{
    console.log('执行get1接口逻辑')
    setTimeout(() =>{
      if(flag.value){
        resolve('get1接口执行完成')
      }else{
        reject('get1接口执行失败')
      }
    },3000)

  })

}

function get2(){
  return new Promise((resolve,reject) =>{
    console.log('执行get2接口逻辑')
    setTimeout(() =>{
      if(flag.value){
        resolve('get2接口执行完成')
      }else{
        reject('get2接口执行失败')
      }
    },2000)

  })

}
function get3(){
  return new Promise((resolve,reject) =>{
    console.log('执行get3接口逻辑')
    setTimeout(() =>{
      if(flag.value){
        resolve('get3接口执行完成')
      }else{
        reject('get3接口执行失败')
      }
    },2000)

  })

}
function get4(){
  return new Promise((resolve,reject) =>{
    console.log('执行get4接口逻辑')
    setTimeout(() =>{
      if(flag.value){
        resolve('get4接口执行完成')
      }else{
        reject('get4接口执行失败')
      }
    },2000)

  })

}

async function get(){
  //使用await可以让异步操作进行同步执行
 const result1 =  await get1();
 console.log(result1)
 const result2 =  await get2();
 console.log(result2)
 const result3 =  await get3();
 console.log(result3)
 const result4 =  await get4();
 console.log(result4)
}
get()

执行结果：

await只能在async修改的异步函数中进行使用。 

3.回调函数方式

使用较少，多级回调导致函数难以理解。

4.三种方式对比

 

 5.async及await使用的注意点

①下面的示例中第一个任务执行完成之后才能执行第二个任务。

更高效的做法是将所有的Promise用Promise.all组合起来，然后再去await，这样会提高运行效率，如下：

 ②在循环中执行异步操作，不能直接调用forEach及map方法，尽管在回调函数中写了await，这里的forEach会立即返回，不会暂停等到所有的异步操作都执行完成。如下:

如果希望循环中的异步操作都一一执行完成之后才继续执行 ，可以使用传统的for循环，如下:

 如果想要循环中的所有操作都并发执行，这里的for循环会等到所有的异步函数执行完成之后才执行后面的处理