嵌套子函数中await未生效仅顶层await等待，如何修复？

你的问题核心是调用异步子函数时没有使用await，导致父函数不会等待子函数内部的异步操作完成，直接继续执行后续逻辑，所以子函数里的setTypes(list)会在父函数流程之后才执行。

修复方案 #

在fetchData中调用addType时添加await关键字，让父函数等待子函数的所有异步操作完成后再继续：

const fetchData = async (referralId:string) => {
    const response = await get<any>("/service-request/" + referralId + "/null");
    if(response){
        // 给addType加上await，等待其内部异步操作完成
        await addType(response);
    }
}

const addType = async (response:any) => {
    if (response['field'] === 'Y') {
       let id = response['id'];
       const list = await get<any>("/types/?id=" + id);
       setTypes(list);
    }
}

原因说明 #

async函数的本质是返回一个Promise对象，当你直接调用addType(response)而不使用await时，JavaScript会把这个异步任务放入事件队列，当前函数的同步逻辑会继续执行，不会等待Promise状态变为resolved。加上await后，父函数的执行会暂停，直到addType内部的所有异步操作（包括await get(...)）全部完成，才会继续往下走。

可选：添加错误处理 #

如果需要处理请求失败的情况，可以用try/catch包裹异步操作，提升代码健壮性：

const fetchData = async (referralId:string) => {
    try {
        const response = await get<any>("/service-request/" + referralId + "/null");
        if(response){
            await addType(response);
        }
    } catch (error) {
        console.error('请求出错:', error);
    }
}

const addType = async (response:any) => {
    if (response['field'] === 'Y') {
        try {
            let id = response['id'];
            const list = await get<any>("/types/?id=" + id);
            setTypes(list);
        } catch (error) {
            console.error('获取类型列表出错:', error);
        }
    }
}

内容的提问来源于stack exchange，提问作者gene b.