如何在useEffect调用serviceRequest及回调时使用async/await语法

第一步：改造封装的serviceRequest方法 #

将原有的回调式写法改为async/await写法，移除冗余的回调参数，直接返回请求结果即可：

export const serviceRequest = async (endpoint) => {
    const options: any = {
        withCredentials: true,
        headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json',
        }
      }
    const response = await axios.get(endpoint, options)
    return response.data
}

第二步：改造useEffect调用逻辑 #

注意React的useEffect本身不支持直接声明为async函数，因此需要在内部封装异步执行函数，通过try/catch处理请求成功和异常场景：

useEffect(() => {
  const fetchData = async () => {
    try {
      const responseData = await serviceRequest("URL")
      // 若success内部有异步逻辑，可添加await等待执行完成
      await success(responseData)
    } catch (err) {
      error(err)
    }
  }

  fetchData()
}, []);

// 给success添加async关键字即可支持内部使用await语法
const success = async (response) => { 
  // 示例：内部可直接调用其他异步方法
  // await otherAsyncOperation(response)
}
const error = (error) => { }

改造说明 #

• 改造后serviceRequest为async函数，自动返回Promise对象，调用时通过await即可直接拿到返回的响应数据
• useEffect不能直接加async的原因是：useEffect的返回值必须是清理函数，若声明为async会返回Promise，违反React的useEffect使用规则
• 如果你的业务需要兼容原有传入success、error回调的调用方式，也可以仅修改serviceRequest内部逻辑为async/await写法，外层调用保持不变，但该方案无法发挥async/await扁平化代码层级的优势，更推荐使用上述返回Promise的方案

内容的提问来源于stack exchange，提问作者Krushna Kumar