ES6中generator函数对ajax请求的控制

最新推荐文章于 2022-03-02 15:32:54 发布

ai_feng123

最新推荐文章于 2022-03-02 15:32:54 发布

阅读量989

点赞数 1

分类专栏： Es6

本文链接：https://blog.youkuaiyun.com/ai_feng123/article/details/98366702

版权

Es6 专栏收录该内容

6 篇文章

订阅专栏

本文探讨了如何利用Generator函数和yield关键字实现Ajax请求的顺序执行。通过具体代码示例，展示了如何确保Ajax请求按顺序进行，且前一请求的结果能作为下一请求的输入，保持了代码的可读性和执行的严谨性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

generator函数写法为

function* fun(){
     yield step1;
     yield step2;
     yield step3;
}

该函数关键字为function*，yield ，yield相当于return语句。该函数为执行-中断-执行，只有执行fun.next（）才会执行下一步；这样一种“机制”可以帮我们控制有关系嵌套的ajax请求

之前我们的情景为两个毫无相关的ajax请求完成才采取下一步动作，使用的是Promise.all()；那这个使用情景可能有所不同。

情景：先有三个ajax请求，必须按照严格顺序执行，第一个ajax返回值需要传递给第二个ajax请求中，第二个请求返回值需要传递给第三个ajax请求中。三个ajax请求存在层层嵌套关系。需要怎么做才可以做到执行顺序的严谨性，还要有良好的可读性

代码如下：

 <script>
        function ajax(url) {
            // 当请求执行完了之后，执行到then之后，又执行到了next();进行下一步请求
            axios.get(url).then(res=>consrdata.next(res.data))
        }
        function* step() {
            const users = yield ajax('https://api.github.com/users');
            const fisterUser = yield 
                  ajax(`https://api.github.com/users/${users[0].login}`);
            const flolowers = yield ajax(fisterUser.flolowers_url)
        }
        var consrdata=step();
        consrdata.next();//开始执行第一步
    </script>

这样就可以严谨执行顺序，还可读性比较好