美文网首页
循环里面请求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