如何使用async/await方法替换示例代码中的then/catch异步写法

核心改写规则 #

• 给目标函数添加async关键字，声明这是一个异步函数
• 用await关键字等待axios请求返回结果，替代原有.then()链式回调接收响应的写法
• 用try/catch语法块包裹异步请求逻辑，catch块对应原有.catch()的异常捕获逻辑
• 原有业务判断、状态派发逻辑完全保留，和原实现行为一致

改写后完整代码 #

const handleClick = async (dispatch) => {
  if (state.trackTitle) {
    try {
      const res = await axios.get(`${apiURL}/suggest/${state.trackTitle}`);
      dispatch({
        type: "SEARCH_TRACKS",
        payload: res.data.data,
        next: res.data.next,
        prev: res.data.prev,
      });
    } catch (err) {
      console.log(err);
    }
  } else {
    alert("Please insert song !!");
  }
};

注意事项 #

• await只能在被async修饰的函数内部使用，漏写async会直接触发语法错误
• try块建议只包裹异步请求和依赖请求结果的后续逻辑，避免无关代码的异常被请求错误的catch块误捕获
• 该写法和原有Promise链式调用的执行逻辑完全等价，不存在行为差异

内容的提问来源于stack exchange，提问作者hazem fayez