Vue中 axios 如何实现发送请求后，获取响应结果后，再继续进行下一次的请求

Question

现在项目设计到大文件的切片上传，需要在第一片上传的响应状态时200后，才能进行第二片的上传，依次上传，现在通过循环控制需要上传切片的次数，但是现在点击上传以后，所有的请求全部发出去，
应该怎么样才能实现第一片的上传成功以后再开始下一片的上传呢？

现在代码如下：

代码如下：

  let iUpdadeState = 0;
      this.testFilesStatus.forEach((item, index) => {
        console.log("item", item);
        let obj = item[0].listFileSliceInfo[0];
        if (obj.strStatus == "none") {
          iUpdadeState = 0;
        } else {
          iUpdadeState = 1;
        }
        let lSize = this.testFiles[index].file.size;
        const sectionSize = 1 * 1024 * 1024;
        const sectionTotal = Math.ceil(lSize / sectionSize);
        for (let i = 0; i < sectionTotal; i++) {
          const startSize = i * sectionSize; // 切片开始位置
          const endSize =
            i === sectionTotal - 1 ? lSize : (i + 1) * sectionSize;
          let fileData = this.testFiles[index].file.slice(startSize, endSize);
          if (this.progress) {
            let formData = new FormData();
            formData.append("file", fileData);
            formData.append("iUpdadeState", iUpdadeState);
            formData.append("iSlideDocumentId", item[0].iFileId);
            formData.append("strFilePath", "");
            FileUploadHandler(formData, (spreed) => {
              // 总大小
              let loaded = 0;
              loaded += spreed.loaded;
              let sep =
                (((loaded / this.testFiles[index].file.total) * 100) | 0) + "%";
              this.testFiles[index].file.status = sep;
            });
          }
        }
      });

Answer 1

这个方法可以改为递归，每次在axios的回调里执行，执行到次数等于sectionTotal就可以了

Answer 2

你这里可以用async/await控制for循环按顺序执行上传方法

Answer 3

把 for 循环体放到 async 函数中，看简单案例：

const updateHandler = async ()=>{
    // 开始循环你的提交
    for( let i = 0 ; i<100 ;i++){
        // 使用 await 执行同步提交
        // res 就是原先 then 中的回调参数
        // 这里使用同步返回，因此 .then 就不需要写了
        let res = await FileUploadHandler()
    }
}

Answer 4

利用es6的遍历器，对for循环简化，并实现先获取上一个接口的响应，再决定是否继续执行

var generator = function* () { 
  yield* [{i:2},{b:3},{c:4}];
};
var it = generator()
var obj = it.next()

// 远程请求接口
function remoteRequest(value){
   return new Promise((resolve)=>{
        setTimeout(()=>{resolve(value)},1000*Math.random())

})
}

// 递归请求
function recursion(value){
    remoteRequest(value).then(res=>{
        console.log(res) // 获取结果
         obj=it.next()
         if(obj.value){
             recursion(obj.value)       
         }
    })
}
// 执行函数
recursion(obj.value)

// 执行结果

Answer 5

简单点的话，搞个异步迭代器就行了

// 总片数
var count = 10;
// 创建异步迭代器
var tasks = {
  [Symbol.asyncIterator]() {
    return {
      current: 0,
      next() {
        if (this.current < count) {
            // 模拟请求
          return new Promise(r=>{
                setTimeout(()=>r({
                    value:this.current++,
                    done: false
                }),1000)
            })
        }

        return Promise.resolve({ done: true });
      }
    };
  }
};
// 开始上传
(async function() {
   for await (num of tasks) {
     console.log(`第${num}片传输完成`)
   }
})().then(()=>{
    console.log('全部完成')
    });