前端vue項目js中怎么保證鏈式調用后台接口

在一個for循環中對同一接口調用多次，如何保證逐步執行，同步執行。

html部分

<DcFileUpload
 v-for="(item, index) of fileLengthList"
 :key="index"
 ref="fileUploadData">
</DcFileUpload>

DcFileIliad組件部分

//slot 標簽就是為了備用留坑，如果用戶需要在組件中增加節點就可以了，類似於插座功能

<template>
<div>
    <div class="form-unit form-upload" style="display:inline-block">
        <Input
            v-model="fileName"
            class="tc-15-input-text m"
            disabled
            :placeholder="placeholder" />
        <a class="tc-upload-btn" title="選擇文件">
            <div class="file-input-wrap">
                <input
                    ref="input"
                    type="file"
                    name="file"
                    :accept="accept"
                    style="z-index:999"
                    @change="handleFileChange" />
                <span>選擇文件</span>
            </div>
        </a>
        <slot></slot>
    </div>   
</div>
</template>

<script>
import { mapActions } from 'vuex';
import DcUploadHelper from '@/common/utils/dcUploadHelper';

export default {
    props: {
        directoryId: {
            type: String,
            default: '',
        },
        accept: {
            type: String,
            default: '',
        },
        placeholder: {
            type: String,
            default: '還未選擇文件',
        },
    },
    data() {
        return {
            fileName: '', // 文件名
            files: [],
        };
    },
    methods: {
        ...mapActions('algorithm', [
            'CreateUploadJob'
        ]),
        handleFileChange(e) {
            const { files } = e.target;
            if (files[0] && files[0].name && files[0].size > 0) {
                this.fileName = files[0].name;
                this.files = files;
            } else {
                this.fileName = '';
                this.files = null;
            }
        },
        handleFileDelete() {
            this.fileName = '';
            this.files = [];
        },
        upload() {
            return new Promise(async (resolve, reject) => {
　　　　　　　　　　　　這里一般寫請求方法，向后台發送數據請求
　　　　　　　　　　　　resolve(status)或reject(status);
                });
            });
        },
        cancelUpload() {
            this.showUploadModel = false;
            DcUploadHelper.stopChunkUpload();
        },
        hasFile() {
            return this.fileName !== '';
        }
    }
};
</script>

<style lang="less">
</style>

上面代碼寫了，ref如何在數組中使用，一般都是直接寫一個ref對象就能獲取到整個循環的對象節點數組，就能按下標讀取了

js 部分
async handleSubmitForm() {
    // 拿到對應的對象數組
　　const { fileUploadData } = this.$refs;
　　for (let index = 0; index < fileUploadData.length; index++) {
　　　　const element = fileUploadData[index];
　　　　const ret = await element.upload();
　　　　cosnole.log(ret);
　　}
}

 上面代碼的 async 和 await可以保證多次調用同一接口，按鏈式調用，上一次接口請求數據回包后才進行下次調用