关于循环同步调用接口

模拟一个后台接口,通过定时器延迟打印数据模拟后台接口返回，由于setTimeout定时函数是异步执行，这里使用ES6语法中的Promise状态，当定时器完成之后返回操作成功

// 模拟接口函数
async function unknowInterface(val: number) {
    return new Promise<void>(resolve => {
        setTimeout(() => {
            resolve();
            console.log(val);
        }, 2000);
    })
}

假定传入的参数为1-10之间的数字

// 参数准备
let arr = Array.of(1,2,3,4,5,6,7,8,9,10)

这里我们重点比较forEach(内部是异步操作)与普通的for循环

1. 使用forEach去调用模拟接口

async function doThis() {
    arr.forEach(async it => {
        await unknowInterface(it);
    })
}

doThis()

执行结果如下：（一瞬间打印出所有结果）

2. 使用普通for循环去调用模拟接口

async function doThis() {
    for(let i = 0; i<arr.length;i++) {
        await unknowInterface(arr[i]);
    }
}

doThis()

执行结果如下：（每隔2s打印出一个结果）

3.总结

尽管两种循环打印的结果一样，但是在某些特殊的情况，需要同步执行函数并返回数据，待上一结果返回后再去调用接口获取下一结果。