api请求多个数据,同步加载的方法,请教

Question

目的, 需要向后端请教多个数据,然后才打开新网页,请教合理的写法

   await API_Member.role({ gr_id: e.id }).then((res) => {
        if (res.data.role !== 'general.admin') {
            throw 'You are not an administrator'
        }
    }).then(() => {
        API_group.info({ gr_id: e.id }).then((res) => {
            groupStore.value = Object.assign(e, res.data)
            console.log('1 groupStore.value', res)
        })
        API_Member.list({ gr_id: e.id }).then((res) => {
            memberStore.value = res.data
            console.log('2 memberStore', memberStore.value)
        })
        API_pmscheme.list({ gr_id: e.id }).then((res) => {
            schemeStore.value = res.data
            console.log('3  schemeStore', schemeStore.value)
        })

    }).then(() => {
        teamDetails.value = true
        loadIcon.value = false
    })

// 上面这样写会出错的,数据没加载完就   teamDetails.value = true 了

// 下面的写法,能完全加载数据,但效率太低, 等待时间太长
请教正确的写法
await API_Member.role({ gr_id: e.id }).then((res) => {
        if (res.data.role !== 'general.admin') {
            throw 'You are not an administrator'
        }
    }).then(() => {
        API_group.info({ gr_id: e.id }).then((res) => {
            groupStore.value = Object.assign(e, res.data)
            console.log('1 groupStore.value', res)
        }).then(() => {
            API_Member.list({ gr_id: e.id }).then((res) => {
                memberStore.value = res.data
                console.log('2 memberStore', memberStore.value)
            }).then(() => {
                API_pmscheme.list({ gr_id: e.id }).then((res) => {
                    schemeStore.value = res.data
                    console.log('3  schemeStore', schemeStore.value)
                }).then(() => {
                    teamDetails.value = true
                    loadIcon.value = false
                })
            })
        })
    })

Answer 1

参考GPT和自己的思路：你可以使用 Promise.all 方法来同时请求多个数据，并且等待它们全部返回才打开新网页。以你的代码为例，可以按照以下步骤进行修改：

1. 创建三个 API 请求的 Promise 对象：

const groupInfoPromise = API_group.info({ gr_id: e.id });
const memberListPromise = API_Member.list({ gr_id: e.id });
const pmSchemeListPromise = API_pmscheme.list({ gr_id: e.id });

1. 使用 Promise.all 方法，等待三个 Promise 对象全部返回：

await Promise.all([groupInfoPromise, memberListPromise, pmSchemeListPromise]);

1. 在 Promise.all 返回后，将数据分别存储到不同的变量中：

const groupInfo = await groupInfoPromise;
groupStore.value = Object.assign(e, groupInfo.data);

const memberList = await memberListPromise;
memberStore.value = memberList.data;

const pmSchemeList = await pmSchemeListPromise;
schemeStore.value = pmSchemeList.data;

1. 最后打开新网页：

teamDetails.value = true;
loadIcon.value = false;

完整的修改后的代码如下：

await API_Member.role({ gr_id: e.id }).then((res) => {
    if (res.data.role !== 'general.admin') {
        throw 'You are not an administrator'
    }
}).then(async () => {
    const groupInfoPromise = API_group.info({ gr_id: e.id });
    const memberListPromise = API_Member.list({ gr_id: e.id });
    const pmSchemeListPromise = API_pmscheme.list({ gr_id: e.id });

    await Promise.all([groupInfoPromise, memberListPromise, pmSchemeListPromise]);

    const groupInfo = await groupInfoPromise;
    groupStore.value = Object.assign(e, groupInfo.data);

    const memberList = await memberListPromise;
    memberStore.value = memberList.data;

    const pmSchemeList = await pmSchemeListPromise;
    schemeStore.value = pmSchemeList.data;

    teamDetails.value = true;
    loadIcon.value = false;
})