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

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

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>

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

  1. 简单粗暴,直接把
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>

效果如下:
使用Promise解决多个请求数据并发问题_第2张图片

你可能感兴趣的:(前端)