干货丨ES7中的异步实现Async和Await

动漫推荐 浏览(954)
万博app

224dcb2a75d54a3f8629f802a0b61cb8

生成器需要以这种方式编写外部执行程序,并且执行程序的代码不容易编写。

当然,也可以使用一些插件,例如co模块,以简化致动器的写入。

14a0d350888a4721b36f5a120f217b8f

在ES7中,添加了异步函数来处理异步。

它实际上只是生成器的语法糖,它简化了外部执行程序的代码,同时用await替换了yield,而不是生成器的(*)。我们来看下面的例子。

异步函数delay(){等待新的Promise((resolve)=> {setTimeout(()=> {resolve()},2000)}); console.log('继续); } delay();

此示例以前使用生成器编写,它将生成器的(*)编号更改为异步。

必须在函数之前写入async关键字。如果是箭头函数,则将其写在参数前面:

Const delay=async()=> {}

在函数中,第一句使用await。它取代了以前的产量。

您还需要稍后跟上Promise对象。

完成上述异步操作后,将执行下一个print语句。

外部调用与普通函数调用相同,但其实现类似于生成器。

由于async关键字,必须有相应的执行程序来执行它,并且在异步操作完成后执行回调函数。

只有这个被隐藏了,JS引擎帮助我们完成它。我们需要做的就是添加关键字并在函数中使用await来执行异步操作。

这极大地简化了异步操作。同时,它们可以像同步方法一样进行处理。

接下来,我们来看看一些更详细的问题。 Await必须后跟Promise对象,这是很好理解的。

因为Promise对象被返回到外部执行程序,并且在异步操作完成后执行resolve,所以外部可以通过回调函数处理它并将结果传递给生成器。

c407a14cc9b4435885d9e3be847ceb8e

图:

那么如果await没有跟随Promise对象会发生什么呢?

Const delay=async()=> {let data=await'hello';的console.log(数据); }

允许这样的代码,但是await将自动将hello字符串包装在Promise对象中。就像这样:

让data=等待新的Promise((resolve,reject)=> resolve('hello'));

创建Promise对象后,立即执行resolve,并将字符串hello传递给外部执行程序。

外部执行程序的回调函数将hello传回,并将其分配给数据变量。

因此,执行代码后,将立即输出字符串hello。尽管代码可以像这样编写,但是等待在这里没有意义,所以仍然应该使用await来处理异步方法,异步方法应该使用Promise对象。

除了await关键字之外,async函数与其他函数没有区别。它有回报值吗?答案是肯定的,

Const delay=async()=> {等待新的Promise((resolve)=> {setTimeout(()=> {resolve()},2000)});返回'完成'; } let result=delay();的console.log(结果);

在延迟功能中,首先执行等待2秒的异步操作,然后返回字符串结束。我在外部调用时使用变量来接收其返回值。最终输出是:

//无需等待立即输出Promise {

} //程序在2秒后结束

我们可以看到没有等待立即输出Promise对象。

整个节目在2秒内结束。可以看出,获取异步函数的结果实际上是返回的Promise对象。

57d118f99fb84fd7b7a210d7aab561e4

如果返回后跟Promise对象,则它将直接返回。但如果没有,它会将一个Promise对象包裹起来,就像等待一样。因此,您想要获取的具体内容应如下所示:

Const delay=async()=> {等待新的Promise((resolve)=> {setTimeout(()=> {resolve()},2000)});返回'完成'; } let result=delay(; console.log(result); result.then(function(data){console.log('data:',data);});

执行结果:

//无需等待立即输出Promise {

} //等待2秒钟输出数据:完成

所以如果函数没有任何返回值,它是什么?我从上面的代码中获取了返回并再次运行它:

//无需等待立即输出Promise {

} //等待2秒输出数据: undefined

如您所见,您仍然可以获取Promise对象,但由于该函数不返回值,因此不会传递任何数据,因此未定义打印结果。

异步的基本原理很明确。让我们用async重写之前的AJAX示例:

Mock.mock(/\ .json /,{'stuents | 5-10': [{'id | +1': 1,'name':'