vue3笔记（5）异步请求

业务需求一中，用户选择多项，每项都需要发一个请求给后端执行相应任务，并且请求返回需要反馈给用户。
方案一是发送多个请求，弹出多个返回值；方案二是发送多个请求，等待所有答复后给用户一个反馈。这篇记录项目中用到的异步请求。
业务需求二中，用户点击item，需要通过请求一、请求二…的连续请求后，获取返回值中数据的值。涉及到多次异步的公共逻辑方法抽取。这篇也进行一些写法记录。

业务需求一

multi req, multi res

方案一：发送多个请求，弹出多个返回值。
优点：可即时看到任务反馈。
缺点：很多弹窗用户体验不佳。

params.host.forEach((item) => {
  params["servername"] = item;
  createServerUser(params).then(res => {
  console.log('create ',res)
  const { code, msg } = res.data
    if (code == 0) {
      ElNotification({
        title: '操作成功',
        message: h('i', { style: 'color: teal' }, '创建服务器用户成功！'),
      });
      getDataSU();
      clearAll();
    } else {
      ElMessage.error(msg);
    }
    isCreating.value  = false;
  })
  .catch((error) => {
    ElMessage.error('创建服务器用户失败...');
    isCreating.value = false;
  });
})

multi req, one res

方案二是发送多个请求，等待所有答复后给用户一个答复。
优点：不会出现多次连续弹窗。
缺点：如果任务失败或者执行时间较长，用户等待过程比较煎熬。
这里使用Promise.all这个API。

let reqArr = [];
params.host.forEach((item) => {
  params["servername"] = item;
  reqArr.push(createServerUser(params));
})

Promise.all(reqArr).then(res => {
  const { code, msg } = res[0].data
    if (code == 0) {
      ElNotification({
        title: '操作成功',
        message: h('i', { style: 'color: teal' }, '创建服务器用户成功！'),
      });
      getDataSU();
      clearAll();
    } else {
      ElMessage.error(msg);
    }
    isCreating.value  = false;
  })
  .catch((error) => {
    ElMessage.error('创建服务器用户失败...');
    isCreating.value = false;
  });

问题思考

1. async/await和promise关系？
2. 如何避免回调地狱？
3. 更直观的回调写法？

业务需求二

Promise作为方法的返回

A方法执行两个异步请求，data1作为第二个请求的输入，获取data2。当两个请求执行完毕后，通过获取返回数据data2的值，进行下一步操作。
A可以作为公共请求抽取出来，多处可用。

setup() {
  const A = async (id) => {
    const data1  = await getData1({id: id})
    return new Promise((resolve,reject) => {
      getData2({
        id: data1.d1_id
      }).then(res => {
        resolve(res.data2)
      }).catch(() => {
        reject()
      })
    })
  }

  const B = async (row) => {
    const data = await A(row.id)
    const status = data && data["status"]
     if(status == "SUCCESS") {
        //doSth
     }else {
        //doSth 
     }
  }
}