面试之ES6promise及async/await初识

    近期因为在找工作，所以一直在准备面试的事，所以看了很多面试的题目，从基础的js知识看到复杂的一些es6的新语法等等，刚好近期也在学习ES6，所以也是将关于面试的一些经典的题目拿出来，给大家分享，同时也是自己的再次学习。

    众所周知，js是一个单线程的语言，所以我们也是经常和同步异步去打交道，要理解同步异步，同时也需要了解一下js的事件循环机制，事件循环机制，用自己的话来总结就是说，js有一个事件队列，所有的异步操作会先被放在事件队列里面，另外有一个叫做执行栈的地方，一般同步的事件就会按照顺序排列在执行栈当中，执行栈中的事件才会先执行，等到执行栈空了以后，js会去事件队列里面寻找，将排在首位的事件压入执行栈进行执行，看下面的代码：

for(var i = 0;i < 5;i++){
    setTimeout(function(){
		console.log(new Date,i)
	},1000);
}
console.log(new Date,i);

这是一个for循环，里面循环了5次的异步操作，可以看最后的输出的结果

 

 

 

 

 

 

可以看到其实最先输入的是for循环外层的log语句，然后才是for里面的setTimeout的异步操作，之所以有这样的情况，也是为了更快的去执行语句，这样的话，在这段异步等待响应结果的同时，我们就去可以做其他的事了，同时，接下来的问题就是输出的结果都是5，这不是我们想要的，我们希望他能够输入不同的数，像1，2，3，4，5，同时每秒输出一个数

const tasks = [];
const output = (i) => new Promise((resolve) => {
    	setTimeout(() => {
			console.log(new Date,i);
			resolve(i);
	},1000*i);
});
for(var i = 0;i < 5;i++){
	tasks.push(output(i));
}

Promise.all(tasks).then((values) => {
	console.log(values);
	    setTimeout(() => {
			console.log(new Date,i);
	},1000);
})

    上面之所以会出现输出5次同样的i的原因自己也是弄了很久才明白，for循环的时候，里面的计数器会瞬间完成循环，及变成了退出循环的条件5，所以当执行异步操作的时候，这个i已经是5了，所以才会有这样的情况，那我们要做的就是保留每一次的循环的计数器i，熟悉的同学都知道这个问题，这次我们用了es6的promise，将异步操作封装在promise里面，并且声明了一个空数组，封装进promise内的异步操作setTimeout就和外面的函数形成了闭包，放进for循环的时候，就能每次获取当前循环的i，这样的话，就能每秒输入一次时间，最后看这个promise.all的方法，接受一个promise组成的数组，也有说接受一个有Iterator接口的数据，暂时没有学习这个，不多说。这个方法返回一个promise对象，我们用then来进行回调，values其实就是上面5次异步操作的结果，记得一定要resolve(i)才能接受到结果，这里因为是一秒生成一次结果，所以就不截图了，有兴趣的同学可以试试。

    另外说说近期也是比较火的async,await，因为自己也是刚刚接触，并不是非常了解，也是简单说一下，async其实就是在函数前面加上async的关键字，像这样

async function timeout() {
	console.log(new Date);
}
let val = timeout();
console.log(val);

也是代表一个异步操作，返回的也是一个promise

而await的作用就是在写在async中的，注意await当且仅能使用在async函数中，否则会报错，await表示一段时间后获得某个结果的意思。具体还有其他的功能自己也是还未熟知，只是暂时先留下一个印象，后续再去全面的学习。