使用Promise解决多个请求数据并发问题

最新推荐文章于 2024-07-30 21:10:23 发布

独酌101112

最新推荐文章于 2024-07-30 21:10:23 发布

阅读量4.6k

点赞数 4

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_43353524/article/details/107685078

版权

前端专栏收录该内容

103 篇文章 2 订阅

订阅专栏

首先引用一下阮一峰大佬的一段话：

Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise是一个对象，从它可以获取异步操作的消息。Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理。

来看一下简单的Promise示例：

let promise = new Promise(function (resolve,reject) {
    console.log('Hello');
    resolve();
});
promise.then(function () {
    console.log('World!');
});
console.log('the');

猜测一下输出顺序是什么，好像提供的输出样例已经暴露了：

Hello
the
World!

Promise对象新建后立即执行，所以最先输出Hello
然后其状态由pending转化为resolved，输出the
最后then作为指定回调函数，当前脚本所有同步任务执行完才会执行

再来看一个实战演练：

<html>
    <script>
        function getData(str) {
            return new Promise((resolve, reaject) => {
                setTimeout(() => resolve(str), Math.random()*3000);
            })
        }
        function getAllData() {
            var all_str = '';
            getData('望').then(res => all_str += res);
            getData('子').then(res => all_str += res);
            getData('成').then(res => all_str += res);
            getData('龙').then(res => all_str += res);
            setTimeout(() => {
                document.getElementById('tripe').innerHTML = all_str;
            }, 3000)
        }
    </script>
    <body>
        <button onclick="getAllData()">获取数据</button>
        <div>
            <h1>内容都显示在这里</h1>
            <div id="tripe"></div>
        </div>
    </body>
</html>

一个很简单的请求多个数据的并发问题，这里需要处理的是，将请求到的数据按顺序排列，组成“望子成龙”四字成语，但是由于设置的存储时间是随机的，导致每次生成的数据顺序都是打乱的，怎么解决这个问题呢？
在这里插入图片描述

简单粗暴，直接把

setTimeout(() => resolve(str), Math.random()*3000);

改为

setTimeout(() => resolve(str), 0);

按照请求字符的顺序来，消除随机计时，确实，这种方法简单有效，但是为了练习Promise，所以使用第二种方法（别骂了，别骂了，水平有限，一时想不出来好的例子QAQ）
2. 通过设置Promise对象来实现请求顺序的排列，代码如下：

<html>
    <script>
        function getData(str) {
            return new Promise((resolve, reaject) => {
                setTimeout(() => resolve(str), 0);
            })
        }
        function getAllData() {
            var all_str = '';
            getData('望').then(res => all_str += res);
            var promise = new Promise(function (resolve,reject) {
                getData('子').then(res => all_str += res);
                resolve();
            });
            promise.then(function () {
                getData('龙').then(res => all_str += res);
            });
            getData('成').then(res => all_str += res);
            setTimeout(() => {
                document.getElementById('tripe').innerHTML = all_str;
            }, 3000)
        }
    </script>
    <body>
        <button onclick="getAllData()">获取数据</button>
        <div>
            <h1>内容都显示在这里</h1>
            <div id="tripe"></div>
        </div>
    </body>
</html>