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

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

// asyncasync function ajaxGetData(){xxxxdosomething()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调用自执行的内容，这是我以后要进行学习的;

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