前端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可以保证多次调用同一接口，按链式调用，上一次接口请求数据回包后才进行下次调用

原文地址：https://www.cnblogs.com/ChineseLiao/p/11808891.html