为何fetchErrors函数内部有值但await返回结果为undefined？

问题描述 #

调用fetchErrors函数时，内部console.log能打印出有值的value，但上层await得到的errorsFetch却为undefined，相关代码如下：

调用方代码

const GetErrors = async (projectScanID: number, projectName: string) => {
  try {
      console.log("fetching errors")
      const errorsFetch = await fetchErrors(projectScanID);
      console.log("errorsfetch:", errorsFetch) // 此处输出undefined
      await setErrors(errorsFetch);
      console.log("errors", errors)
      setIsErrorsFetchComplete(true);
      console.log("errors: ", errors)
  }
  catch(e) {
      enqueueSnackbar(`Could not load errors! Error: ${e}`, {variant: 'error'});
  }
}

被调用的fetchErrors函数

export const fetchErrors = async (project_scan_id: number): Promise<IError[]> => {
    let errors = <Array<IError>>[];
    let string_project_scan_id: string | null = String(project_scan_id)
    ///fetches error data
    return Promise.resolve(errors).then(function (value) {
        console.log("value:", value) // 此处输出有值的数组
    }).catch(function (error) {
        console.log("Error")
    });
}

问题原因 #

核心问题在fetchErrors的then回调逻辑：

• then方法会返回一个新的Promise，这个Promise的最终解析值由回调函数的返回值决定。
• 你的then回调只执行了console.log，没有返回任何值，所以这个新Promise会默认解析为undefined，最终await fetchErrors()得到的结果就是undefined。
• 另外，catch块只打印错误却没有重新抛出，会导致上层try/catch无法捕获到fetchErrors内部的异常，失去错误处理能力。

解决方案 #

方案1：修复then回调的返回值

在then中返回value，同时在catch中重新抛出错误：

export const fetchErrors = async (project_scan_id: number): Promise<IError[]> => {
    let errors = <Array<IError>>[];
    let string_project_scan_id: string | null = String(project_scan_id)
    ///fetches error data
    return Promise.resolve(errors).then(function (value) {
        console.log("value:", value)
        return value; // 关键：传递value到下一个Promise链
    }).catch(function (error) {
        console.log("Error")
        throw error; // 重新抛出错误，让上层捕获
    });
}

方案2：利用async/await简化代码（更推荐）

既然fetchErrors已经是async函数，完全可以抛弃Promise链式调用，改用await让代码更简洁易读：

export const fetchErrors = async (project_scan_id: number): Promise<IError[]> => {
    let errors = <Array<IError>>[];
    let string_project_scan_id: string | null = String(project_scan_id)
    ///fetches error data
    // 模拟异步操作，真实场景替换为你的请求逻辑（比如await fetch(...)）
    const value = await Promise.resolve(errors);
    console.log("value:", value);
    return value;
}

额外说明 #

• 关于setErrors：React状态更新是异步的，即使加了await，后续的console.log(errors)也不会立即显示更新后的值，这是正常现象，和当前undefined的问题无关。

内容的提问来源于stack exchange，提问作者web-dev-nerd