阿里的一道测评题

最新推荐文章于 2023-09-01 21:35:18 发布

0阶_4阶_24

最新推荐文章于 2023-09-01 21:35:18 发布

阅读量1.2k

点赞数 1

分类专栏： Web 文章标签：阿里异步 JavaScript promise

本文链接：https://blog.csdn.net/qq_35065906/article/details/81190954

版权

Web 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

题目：

		const timeout = ms => new Promise((resolve, reject) => {
			setTimeout(() => {
				resolve();
			}, ms);
		});

		const ajax1 = () => timeout(2000).then(() => {
			console.log('1');
			return 1;
		});

		const ajax2 = () => timeout(1000).then(() => {
			console.log('2');
			return 2;
		});

		const ajax3 = () => timeout(2000).then(() => {
			console.log('3');
			return 3;
		});

		const mergePromise = ajaxArray => {
			// 在这里实现你的代码
			// ;


		}

		mergePromise([ajax1, ajax2, ajax3]).then(data => {

			console.log('done');
			console.log(data); // data 为 [1, 2, 3]
		});

		// 分别输出
		// 1
		// 2
		// 3
		// done
		// [1, 2, 3]

作为新手的我，一脸懵逼，在半小时内并没有解决，草草写了点。

接着又思考了几个小时，我的答案是这样的，自认为应该符合需求：

<!DOCTYPE html>
<html>
<head>
	<title>666</title>
</head>
<body>
	<script type="text/javascript">
		const timeout = ms => new Promise((resolve, reject) => {
			setTimeout(() => {
				resolve();
			}, ms);
		});

		const ajax1 = () => timeout(2000).then(() => {
			console.log('1');
			return 1;
		});

		const ajax2 = () => timeout(1000).then(() => {
			console.log('2');
			return 2;
		});

		const ajax3 = () => timeout(2000).then(() => {
			console.log('3');
			return 3;
		});

		const mergePromise = ajaxArray => {
			// 在这里实现你的代码
			// ;
			var _result = [];
			var _exec = "(data) => {_result.push(data); resolve(_result);}";
			for (var i = ajaxArray.length - 1; i >= 0; i--) {
				if(i != 0)	{
					_exec = "(data) => {_result.push(data);ajaxArray[" + i + "]().then(" + _exec + ")}";
				}
				else {
					_exec = "ajaxArray[0]().then(" + _exec + ")";
				} 
			}
			return Promise.all([new Promise((resolve, reject) => {eval(_exec)}).then(data=>{return data;})]).then(data => {return data[0]})

		}

		mergePromise([ajax1, ajax2, ajax3]).then(data => {

			console.log('done');
			console.log(data); // data 为 [1, 2, 3]
		});

		// 分别输出
		// 1
		// 2
		// 3
		// done
		// [1, 2, 3]
	</script>

</body>
</html>

从中上网学习到的：

=>的含义

(x) => x + 6

相当于

function(x){
    return x + 6;
};

Promise是异步编程的一种解决方案，比传统的解决方案（回调函数和事件）更合理更强大。

Promise.all等待所有都完成并按参数顺序返回执行结果，作为参数传给then。

var promise1 = Promise.resolve(3);
var promise2 = 42;
var promise3 = new Promise(function(resolve, reject) {
  setTimeout(resolve, 3000, 'foo');
});

Promise.all([promise1, promise2, promise3]).then(function(values) {
  console.log(values);
});
console.log("666")
// expected output: Array [3, 42, "foo"]

实例化的 Promise 有三个状态：

Fulfilled: has-resolved, 表示成功解决，这时会调用 onFulfilled.
Rejected: has-rejected, 表示解决失败，此时会调用 onRejected.
Pending: unresolve, 表示待解决，既不是resolve也不是reject的状态。也就是promise对象刚被创建后的初始化状态.

使用Promise.all返回的是一个Promise对象，当要执行的异步操作未结束，Promise的状态是Pending，当处理完时，状态转为Fulfilled，这样保证了：console.log(data)一定在ajax3后执行。
```
mergePromise([ajax1, ajax2, ajax3]).then(data => {

			console.log('done');
			console.log(data); // data 为 [1, 2, 3]
		});
```
大佬勿喷！欢迎交流！