美文网首页
循环里面请求api,结果不是想要好的。

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

作者: 不会写代码的机器人 | 来源:发表于2019-11-02 11:30 被阅读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

相关文章

网友评论

      本文标题:循环里面请求api,结果不是想要好的。

      本文链接:https://www.haomeiwen.com/subject/jypcbctx.html