如何按顺序执行数组对象的数据库查询Promise并填充下拉选择框？

我有一个名为projectArray的对象数组，每个项目包含project_id。需要通过project_id从数据库获取对应项目的所有成员，检查所有成员是否已审批，将符合条件的项目标题填充到下拉选择框中。由于团队标准仅使用Promise，不能使用async/await。当前通过map生成了相关Promise函数但未执行，希望实现按顺序处理每个项目（完成前一个的所有步骤再处理下一个），现有代码如下：

var select = document.getElementById('projectSelect')

projectArray.map(project => () => {        // map each project in array to a new promise
    getMembers(project.project_id)
        .then(members => {                 // pass in array of member objects returned from getMembers()
            if (members.every(member => member.approved)) {

                // populate dropdown with projects
                let option = document.createElement("option")
                option.text = project.title
                option.value = project.project_id
                select.appendChild(option)
            }
        }
})

function getMembers(project_id) {
    return new Promise((resolve, reject) => {
            $.ajax({
                type: "GET",
                url: "../../../getMembers",
                data: { 
                    "project_id": project_id
                },
                success: function (data) {
                    return resolve(data)
                },
                error: function (error) {
                    return reject(error)
                }
            })
    }
}

请问如何让这些Promise及后续函数按顺序执行？

要实现Promise的顺序执行，核心是通过Promise链式调用，利用Array.prototype.reduce将每个项目的处理逻辑依次串联，确保前一个任务完成后再触发下一个。具体修改如下：

修正后的完整代码 #

var select = document.getElementById('projectSelect')

// 生成每个项目的处理函数（执行后返回对应任务的Promise）
const projectHandlers = projectArray.map(project => () => {
    return getMembers(project.project_id)
        .then(members => {
            if (members.every(member => member.approved)) {
                // 填充符合条件的项目到下拉框
                let option = document.createElement("option")
                option.text = project.title
                option.value = project.project_id
                select.appendChild(option)
            }
        })
})

// 用reduce构建顺序执行的Promise链
projectHandlers.reduce((prevPromise, currentHandler) => {
    return prevPromise.then(currentHandler)
}, Promise.resolve())

function getMembers(project_id) {
    return new Promise((resolve, reject) => {
        $.ajax({
            type: "GET",
            url: "../../../getMembers",
            data: { 
                "project_id": project_id
            },
            success: function (data) {
                resolve(data)
            },
            error: function (error) {
                reject(error)
            }
        })
    }) // 修正：补上Promise的闭合括号
}

关键说明 #

1. 处理函数数组：projectHandlers是每个项目对应的任务函数数组，每个函数执行后会返回一个Promise，对应该项目的成员查询、审批状态检查、下拉框填充逻辑。
2. 链式调用构建：reduce方法从一个已完成的Promise（Promise.resolve()）开始，把每个任务函数依次挂到前一个Promise的then方法后，强制任务按顺序执行——只有前一个Promise完成，才会触发下一个任务函数。
3. 语法修正：补全了原代码中缺失的Promise闭合括号、then方法的闭合括号，避免运行报错。

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