场景1:有时候一个列表接口中的一个字段需要请求另外个接口

// 模拟接口
let API = {
  getData(){
    return new Promise(resovle=>{
      const data = [
        {
          id: 1,
          userId: 1,
          title: "摩西摩西"
        }
      ]
      resovle(data)
    })
  },
  getUserInfo(userId){
    return new Promise(resovle=>{
      const data = {
        1: {
          name: "东方仗助",
          address: '杜王町'
        },
        2: {
          name: "空条承太郎",
          address: '日本'
        }
      }
      resovle(data[userId])
    })
  }
}
async function getList(){
  let res = await API.getData()
  res = res.map(item=>{
    let tem = {
      ...item
    } 
    API.getUserInfo(tem.userId).then(res=>{
      tem.userInfo = res
    })
    return tem
  })
  return res
}
let resArr = await getList()
console.log(resArr)

场景2 循环中要按照顺序异步执行,或者说需要等所有异步结束后再执行其他操作

例如,需要循环列表数据,对列表数据进行其他的异步操作,等所有操作结束再返回结果

// 模拟接口
const API = {
  getData(){
    return new Promise(resovle=>{
      const data = [
        {
          id: 1,
          userId: 1,
          title: "雷猴"
        },
        {
          id: 2,
          userId: 2,
          title: "你好啊"
        }
      ]
      resovle(data)
    })
  },
  sendMessage(userId){
    return new Promise(resovle=>{
      // 伪代码
      // 调用第三方API发送信息
      resovle({
        msg:"成功",
        userId
      })
    })
  }
}
async function getAllData(){
  let dataArr = await API.getData()
  // 创建一个promise队列,再利用Promise.all()
  let promiseQueue = []
  dataArr.forEach(item=>{
    let p = new Promise(async resolve=>{
     let res = await API.sendMessage(item.userId)
      resolve(res)
    })
    promiseQueue.push(p)
  })
  let queueRes = await Promise.all(promiseQueue)
  // 拿到所有数据,执行其他操作
  console.log(queueRes)
}
getAllData()

场景3 每隔一段时间执行异步操作

有时候,需要间隔一段时间调用第三方接口(因为如果短时间内同时请求,第三方接口会做限制)

// 模拟数据库数据
const dbData = [
  {
    id: 1,
    name: "艾伦",
  },
  {
    id: 2,
    name: "三笠",
  }
]
// 模拟接口
const API = {
  getData(){
    return new Promise(resolve=>{
      resolve(dbData)
    })
  },
  updataData(id,name){
    return new Promise(resolve=>{
      let targetIndex = dbData.findIndex( item=> item.id === id)
      const newValue = {
        id,
        name
      }
      console.log(`id为${id},已修改为${name}`)
      dbData.splice(targetIndex,1,newValue)
      resolve(newValue)
    })
  }
}
// 延迟执行fn,并promise化
function sleep(time, fn, ...arg) {
  return new Promise(resolve => {
    setTimeout(() => {
      fn(...arg)
      resolve(...arg)
    }, time)
  })
}
function updataFn(id,name){
  return API.updataData(id,name)
}
// 将传过来的数据进行批量修改
function updateAllData(updataIdArr){
  const promiseQueue = []
  updataIdArr.forEach((item,index)=>{
    const { id, name } = item
    // 注意需要将时间*index
    let p = sleep(1000*index, updataFn, id, name)
    promiseQueue.push(p)
  })
  Promise.all(promiseQueue).then(res=>{
    console.log(res)
    console.log("已全部修改!")
  })
}
let updataIdArr = [
  {
    id: 1,
    name: "兵长"
  },
  {
    id: 2,
    name: "团长"
  }
]
updateAllData(updataIdArr)