ASP.NET Core MVC员工列表加载电话号码空数组问题求助

核心问题是异步操作的时序错误：ObtenerTelefonos里的fetch是异步网络请求，函数会在请求还未拿到服务器响应时就直接返回空数组，导致后续渲染逻辑拿不到真实的电话号码数据。

修改后的代码 #

1. 重构ObtenerTelefonos函数，返回Promise #

function ObtenerTelefonos(id) {
    // 直接返回fetch的Promise链，无需提前声明空数组
    return fetch(`/Telefono/listaTelefonos?idEmpleado=${id}`)
        .then(response => {
            return response.ok ? response.json() : Promise.reject(response)
        })
        .then(responseJson => {
            if (responseJson.length > 0) {
                return responseJson.map(telefono => ({
                    idTelefono: telefono.idTelefono,
                    descripcion: telefono.descripcion,
                    numero: telefono.numero,
                    idEmpleado: telefono.idEmpleado
                }));
            }
            return []; // 无数据时返回空数组
        })
}

2. 修改MostrarEmpleados函数，正确处理异步逻辑 #

原forEach无法支持异步等待，换成for...of循环可确保每个员工的电话号码请求完成后再渲染：

// loads Employee list and builds the list in the front end
async function MostrarEmpleados() {
    var className;

    try {
        const response = await fetch("/Home/listaEmpleados");
        if (!response.ok) throw response;
        const responseJson = await response.json();

        if (responseJson.length > 0) {
            $("#tablaEmpleados tbody").html("");

            let i = 0;
            // 用for...of替代forEach，支持await异步等待
            for (const empleado of responseJson) {
                className = "telefonos" + i;
                // 先创建并插入员工行
                const row = $("<tr>").append(
                    $("<td>").text(empleado.nombreCompleto),
                    $("<td>").addClass(className),
                    $("<td>").text(empleado.refDepartamento.nombre),
                    $("<td>").text(empleado.sueldo),
                    $("<td>").text(empleado.fechaContrato),
                    $("<td>").append(
                        $("<button>").addClass("btn btn-primary btn-sm boton-editar-empleado").text("Editar").data("dataEmpleado", empleado),
                        $("<button>").addClass("btn btn-danger btn-sm ms-2 boton-eliminar-empleado").text("Eliminar").data("dataEmpleado", empleado),
                    )
                );
                $("#tablaEmpleados tbody").append(row);

                // 等待电话号码请求完成，拿到真实数据
                const telefonos = await ObtenerTelefonos(empleado.idEmpleado);
                // 创建下拉框并插入对应单元格
                const select = $("<select>").addClass("listaTels");
                telefonos.forEach((telefono) => {
                    select.append($("<option>").text(`${telefono.descripcion}: ${telefono.numero}`));
                });
                $(`.${className}`).append(select);

                i++;
            }
        }
    } catch (error) {
        console.error("加载数据失败:", error);
    }
}

关键说明 #

• Web前端的网络请求（如fetch）是异步执行的，代码不会等待请求完成就继续往下走，这和桌面/游戏开发的同步逻辑差异很大。
• async/await可以把异步代码写成类似同步的结构，大幅提升可读性，避免时序混乱；也可以用then链式调用实现，但async/await更直观。
• 原forEach无法正确处理异步等待逻辑，换成for...of循环能确保每个员工的电话号码加载完成后，再渲染对应的下拉框。

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