当前位置：首页 > news >正文

项目中async和await的应用场景

news 来源：原创 2025/5/10 23:11:10

前言：在vue项目开发时，async和await这两个关键字，是绕不开的，因此我们必须要懂得什么情况下要使用这两个关键字，并解决遇到的问题。

1、不使用这两个关键字，可能存在的问题

2、使用await和async解决上述问题

3、使用async和await这两个关键字时，需要注意的事项

1、不使用这两个关键字，可能存在的问题

问题描述：如下面的代码，我们一开始定义allDept为空。在selectDeptCategory方法中，发送了一个axios异步请求，并给allDept赋值。由于axios异步请求是异步的，因此导致下面的JS代码不会等请求执行完毕再执行。说人话就是，我们在下面的selectDept 方法中访问allDept时，可能axios异步请求还没执行完毕，就会导致allDept还没被赋值，而是仍然为空。此时我们就无法使用allDept完成后续操作。

//某个科室分类下的，所有科室【对象数组】
let allDept = ref()

//选择科室分类后，查询旗下的科室
const selectDeptCategory = (value) => {
  //value是指我们选择的那个label的value值，如：外科的值是1，内科的值是2。
  //alert(value);
  //根据科室分类id，查询旗下所有的科室
  queryAllDeptByCategoryId(value).then(res => {
    //alert(JSON.stringify(res.data));
    allDept.value = res.data
  })
}

//选择科室后，获取当前所选科室的缩写
const selectDept = (value) => {
  //alert(value);//value是当前选中的科室的id值
  //根据科室id，算出所选科室在科室数组的下标为id-1,然后就可以在科室数组中查找该科室的科室缩写
  const selectedDept = allDept[value-1]
  alert(selectedDept.deptCode)  
}

2、使用await和async解决上述问题

        上述改进：使用await等待异步请求执行完毕，再将后端响应结果赋值给res，然后再将res的数据部分data（这个data就是我们所需的对象数组）赋值给allDept。

        这样一来，就解决了下面访问allDept为空的BUG。

而且这样一看，更像同步代码（本质还是异步代码，但更顺眼、更符合我们写同步代码的逻辑）。