循环里面请求api,结果不是想要好的。

2019-11-02  本文已影响0人  不会写代码的机器人

问题描述:例如以下循环中执行一个函数,函数请求api(这里用延迟期模拟)。

参考:https://www.cnblogs.com/leungUwah/p/7932912.html

问题如下,for循环为异步 two函数还没有执行完one函数就console出来了。所以打印 0

      let num = 0;
      one()
        function one() {
            for (let i = 0; i < 5; i++) {
                two()
            }
            console.log(num)  //输出0
        }
        function two() {
            setTimeout(() => {
                num++;
            }, 2000);
        }

解决方法 使用ES7前端异步玩法:async/await

await 必须放在一个定义了async 的父级函数里面

  <script>
        let num = 0;
        one()
        async function one() { //定义异步函数
            for (let i = 0; i < 5; i++) {
                await two() //await 要等待上一次的resolve结果返回才会执行下一次循环
                    .then(resolve => {
                        console.log(num) //结果是 每隔一秒  输出 1 ,2,3,4,5
                        console.log(resolve) //每隔一秒输出  ok
                    })
            }

        }

        function two() {
            return new Promise((resolve, reject) => {
                setTimeout(() => {
                    num++;
                    resolve('ok') //必须写   括号内是需要返回的数据  相当于return
                }, 1000);
            })

        }
    </script>

打印结果:


image.png
上一篇 下一篇

猜你喜欢

热点阅读