如何让GraphQL根对象中的timeout生效并正确返回数据？

在GraphQL后端中，employees字段能通过await正确获取并返回数据，但包含setTimeout的slowEmployees始终返回空数组，怎么让它等待数据加载完成后再返回？

原代码：

const root = {
    hello: () => {
        return 'hello world';
    },
    message: () => {
        return 'the message';
    },
    books: () => {
        return ['More About Linux', 'Bash Shell Scripting'];
    },
    employees: async () => {
        const rawEmployees = (
            await axios.get(
                'https://edwardtanguay.netlify.app/share/employees.json'
            )
        ).data;
        const employees = [];
        rawEmployees.forEach((rawEmployee) => {
            const employee = {
                firstName: rawEmployee.firstName,
                lastName: rawEmployee.lastName,
            };
            employees.push(employee);
        });
        return employees;
    },
    slowEmployees: () => {
        const employees = [];
        setTimeout(async () => {
            const rawEmployees = (
                await axios.get(
                    'https://edwardtanguay.netlify.app/share/employees.json'
                )
            ).data;
            rawEmployees.forEach((rawEmployee) => {
                const employee = {
                    firstName: rawEmployee.firstName,
                    lastName: rawEmployee.lastName,
                };
                employees.push(employee);
            });
        }, 2000);
        return employees;
    },
};

解决方案 #

问题核心是setTimeout是异步执行的，当前slowEmployees函数会直接返回初始的空数组，不会等待setTimeout内部的请求和数据处理完成。只需将setTimeout包装成Promise，并把slowEmployees改为异步函数即可解决：

修改后的代码 #

const root = {
    hello: () => {
        return 'hello world';
    },
    message: () => {
        return 'the message';
    },
    books: () => {
        return ['More About Linux', 'Bash Shell Scripting'];
    },
    employees: async () => {
        const rawEmployees = (
            await axios.get(
                'https://edwardtanguay.netlify.app/share/employees.json'
            )
        ).data;
        return rawEmployees.map(rawEmployee => ({
            firstName: rawEmployee.firstName,
            lastName: rawEmployee.lastName
        }));
    },
    slowEmployees: async () => {
        // 将setTimeout包装为Promise，await等待延迟结束
        await new Promise(resolve => setTimeout(resolve, 2000));
        // 后续逻辑与employees一致，确保数据加载完成后再返回
        const rawEmployees = (
            await axios.get(
                'https://edwardtanguay.netlify.app/share/employees.json'
            )
        ).data;
        return rawEmployees.map(rawEmployee => ({
            firstName: rawEmployee.firstName,
            lastName: rawEmployee.lastName
        }));
    },
};

关键改动说明 #

1. 给slowEmployees添加async关键字，使其成为异步函数
2. 用new Promise包装setTimeout，通过await等待2秒延迟完成
3. 数据处理部分改用map简化代码（原forEach逻辑也可保留，map更简洁高效）

这样修改后，slowEmployees会先等待2秒，再发起请求并处理数据，最后返回完整的员工数组。

内容的提问来源于stack exchange，提问作者Edward Tanguay