Как заставить последующий вызов axios для результата массива первого вызова axios?

Question

Я пытаюсь сделать вызов axios из результата первого вызова axios, где данные, возвращаемые из первого вызова, являются массивом, и я хотел бы повторить результат массива первого вызова axios и сделать еще один вызов axios для каждого членарезультата массива.После завершения каждого вызова axios я хотел бы отобразить данные в шаблоне Vue.Таким образом, в основном результат второго вызова axios также должен отображаться внутри элемента списка результата первого вызова axios.

Какой лучший способ справиться с этим?Я попытался использовать async и await, и данные отображались до завершения каждой оси, а результат второго вызова axios не отображался в компоненте Vue.

Сценарии Vue:

getOffTheJobs(id, token) {
            const self = this
            const instance = axios.create();
            delete instance.defaults.headers.common['X-CSRF-TOKEN'];

            instance.get(`${initialState.offTheJobApiBase}offthejob/${id}`, {
                headers: {
                    'Authorization': token
                }
            })
            .then(({data}) => {
                if (data.hasOwnProperty('status') && data.status == 'success' && data.hasOwnProperty('data')) {
                    // Calculating total hours
                    data.data.activities.forEach(async (offTheJobAct) => {
                        self.totalOffTheJobActivityHours += offTheJobAct.totalHours;
                        if (offTheJobAct._id) {
                            await instance.get(`${initialState.offTheJobApiBase}activity/${offTheJobAct._id}`, {
                                headers: {
                                    'Authorization': token
                                }
                            })
                            .then(({data}) => {
                                if (data.hasOwnProperty('status') && data.status == 'success' && data.hasOwnProperty('data') && !self.isEmptyArrayObject(data.data.activityEvidences)) {
                                    self.offTheJobEvidences[offTheJobAct._id] = data.data.activityEvidences
                                }
                            }).catch((err) => {
                                console.warn(err.response.data.error)
                            })
                        }
                    })
                    self.offTheJobDetails = data.data
                    self.show = true
                } else {
                    self.show = true
                }
            })
            .catch((err) => {
                console.warn(err)
                this.showNotification('error', err.response.data.error)
            })
        },

Коды компонентов Vue:

<div class="block otj-detail" v-if="offTheJobDetails">
    <h4>{{ offTheJobDetails.offTheJobTraining.name }} </h4>
    <span>Total Required Hours: {{ offTheJobDetails.offTheJobTraining.totalHours }}</span>
    <span>Total Hours Met: {{ totalOffTheJobActivityHours }}</span>

    <div class="masterClasss" v-for='offTheJobActivity in offTheJobDetails.activities'>
        <h5>Activity</h5>
        <span class="block-detail">Name: {{ offTheJobActivity.name }}</span>
        <span class="block-detail">Location: {{ offTheJobActivity.location }}</span>
        <span class="block-detail">Hours Met: {{ offTheJobActivity.totalHours }}</span>
        <div class="otj-detail-evidences" v-if="!isEmptyArrayObject(offTheJobEvidences) && offTheJobEvidences.hasOwnProperty(offTheJobActivity._id)">
            <div class="col-md-3" v-for="activityEvidence in offTheJobEvidences[offTheJobActivity._id]">
                          {{ activityEvidence.evidenceDocument }}
            </div>
        </div>
    </div>
</div>

Answer 1

Это должно сработать, не может проверить это.Код может быть немного сухим.

async getOffTheJobs(id, token) {
    const self = this
    const instance = axios.create();
    delete instance.defaults.headers.common['X-CSRF-TOKEN'];

    const opts = {
        headers: { 'Authorization': token }
    }
    const url = `${initialState.offTheJobApiBase}offthejob/${id}`
    const { data } = await instance.get(url, opts)

    if (!(data.status && data.status == 'success' && data.data)) {
        self.show = true
        return
    }

    // Calculating total hours
    const { activities } = resp.data
    const p = activities.map(async (offTheJobAct) => {
        self.totalOffTheJobActivityHours += offTheJobAct.totalHours;
        if (offTheJobAct._id) {
            try {
                const url = `${initialState.offTheJobApiBase}activity/${offTheJobAct._id}`
                const { subData } = await instance.get(url, opts)
                if (subData.status && subData.status == 'success' && subData.data && 
                    !self.isEmptyArrayObject(subData.data.activityEvidences)) {
                    self.offTheJobEvidences[offTheJobAct._id] = subData.data.activityEvidences
                }
            } catch (err) {
                console.warn(err.response.data.error)
            }
        }
    })

    await Promise.all(p)
    self.offTheJobDetails = data.data
    self.show = true
},