JavaScript 异步之美 async / await

JavaScript 异步之美 async / await

我们在说 async和await 的时候 先给大家介绍一下迭代器模式

对于

java

语言来说，迭代器是一个很基本的模式，list与set结构都内置了迭代器。

但是

javascript

并没有这种结果（ps：ES6提供了set，而且也可以实现迭代器），但是我们对这种模式实用的并不是特别多。

迭代器模式是指提供一种方法顺序访问一个聚合对象中的各个元素，而又不需要暴露该对象的内部表示。

so：迭代器就是在不暴露对象的内部表示的情况下，能够遍历整个元素

核心就是：不暴露内部，可以遍历内部

// 下面我们就来实现一个简单的迭代器
// 在数据获取的时候没有选择深拷贝内容，
// 对于引用类型进行处理会有问题
// 这里只是演示简化了一点
function Iterdtor(arr){
let data = [];
if(!Array.isArray(arr)){
data = [arr];
}else{
data = arr;
}
let length = data.length;
let index = 0;
// 迭代器的核心next
// 当调用next的时候会开始输出内部对象的下一项
this.next = function(){
let result = {};
result.value = data[index];
result.done = index === length-1? true : false;
if(index !== length){
index++;
return result;
}
// 当内容已经没有了的时候返回一个字符串提示
return 'data is all done'
};
}
let arr = [1,2,3,4,5,6];
// 生成一个迭代器对象。
let iterdtor = new Iterdtor(arr);
iterdtor.next()
iterdtor.next()

这就符合迭代器模式的特点，并没有暴露内部的对象， 通过next的方法可以遍历内部对象。

其实在Generator函数执行后会返回一个迭代器

大家都知道

async

函数是

Generator

的语法糖

这两个理由是不是一下子就说明写迭代器是很有用处的。

接下来书写一个简单的

Generator

函数

function *Iterdtor(){
console.log(1);
yield '123';
console.log(2);
yield '234';
console.log(3);
return '345'
}
let iterator = Iterdtor();

打印

我们执行了一下

Generator

函数返回一个迭代器。通过

next

方法，可以阻塞性的去执行

Generator

的代码。

粗俗的while循环实现next的调用是不可取的

这种方式让我们体会到另一种处理异步的方式，就是阻塞时的去执行多个串行的异步任务，这样可以感受同步的写法去书写异步的代码，也就不会在不合适的时间去拿去异步的产生的数据，你阻塞着线程，你不等他执行完，你取值的操作也做不了呀。

如何实用async await

说到这里如何使用他们就比较清晰明了了吧

// async
async function ajaxGetData(){
xxxx
dosomething()
await ajaxGetDataFirst()
dosomething()
await ajaxGetDataSecond()
dosomething()
xxx
}
ajaxGetData()

我们做了一些事情，然后到一个异步的ajax请求后，等待

ajaxGetDataFirst

这个异步的事件执行完毕后，开始继续做一些事情，到了第二个ajax异步请求

ajaxGetDataSecond()

，开始执行阻塞住函数的执行，等待异步事件执行完毕后就继续做下面的事情。用await关键字的时候就是在告诉下面的代码，这块你得给我等着，wait我执行完了才能轮到你 understand？总之await吊极了。

await在什么时候可以用？ 只有在async函数体内部使用，而且这个作用范围是不可以继承下去的。

在promise中怎么使用async函数

new Promsie(async (resolve,reject)=>{
await xxx
})
// 这样的async才能使await有效果，书写在promise之外的话await就会像上面一样报错

async函数的返回值是什么？ async函数的返回值是一个promise对象,

async 与 Generator的区别

async 与

Generator

的区别是什么？
async是

Generator

的语法糖，

Generator

是可以用来实现async的，用

Generator

来实现async的核心就是实现这种不需next调用自执行的内容，这是我以后要进行学习的;

一键三连 我会继续为大家分享前端知识;~