异步问题：for循环请求不定个数的n个接口

我这里的业务场景是在保存一个表单的时候，需要上传视频文件，文件可以是多个，点击保存的时候，计算出所上传的视频文件链接的总时长，通过视频链接获取视频的时长的方法是

 let videoDom = document.createElement('video');
 videoDom.src = 'http.******';
 videoDom.addEventListener('loadedmetadata',function(){
   console.log(videoDom.duration);
 })

然后需要遍历fileList去创建标签，获取总的duration

//获取时长
function getDuration(url) {
    let videoDom = document.createElement('video');
    videoDom.src = url;
    return new Promise((resolve, reject) => {
        videoDom.addEventListener('loadedmetadata',function(){
            resolve(videoDom.duration)
        })
    })
}

// 创建Promise方法
function createPromise(item) {
    let promise = new Promise((resolve, reject) => {　　　　//将业务接口的返回值,resolve进去
        getDuration(item).then((res) => { resolve(res) })
    })
    return promise
}


function run() {
    let list = [];
    let resList = [];
    fileList.forEach((item) => {
        list.push(createPromise(item))
    })
    Promise.all(list).then((res) => {
        resList = res
    })
}
run()

原文链接中有提到递归调用接口，说可以解决阻塞问题和时长问题，写法如下

function ajax() {
    let data = [{ name: '小明', age: 22 }, { name: '小红', age: 18 }]
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve(data)
      }, 200)
    })
}
递归终止条件,数组长度小于
async function run(length, arr) {
    const res = await ajax();
    arr.push(res)
    if (length> 1) {
      await run(length- 1, arr)
    }
    return arr
}


async function getResult() {
    let userList = [{ id: 1 }, { id: 2 }];
    let res = await run(userList.length, []);
}

getResult()

等有时间再看第二种写法，