ES7的Async/Await的简单理解

Async/Await 的个人见解

正文:

async,顾名思义,一个异步执行的功能,而 await 则是配合 async 使用的另一个关键字,也是闻字识其意,就是叫你等待啦!

二者配合食用效果更佳哦,就像德芙配巧克力 ⊙_⊙||

现在其实有点意识的前端或者JS学习者基本都学习了ES6语法了,但是依旧感觉在编写异步代码上不够爽怎么办,在 ES7 的 async/await 则能使得我们在编写异步代码时变得像同步一样的方式来编写,这样子可以帮助我们更直观的阅读我们的额代码而不必在一堆代码中去寻找这个异步的请求代码了,我们将异步执行的代码封装了或者作为模块导入即可。这样做不仅可以帮助我们的代码提高可阅读性,采用模块引入的方式也更利于我们代码的后期维护。

async/await 出来其实很早了,15年时就有许多人在社区中开始推广了,但是为什么我今天才学习了?没法用啊!,之前想要用个新特性要折腾多少事!精力不足啊我们这种小程序员,又不是哪些大牛们三下五除二解决了工作问题,时间与精力都比我们多啊。

废话这么多!好啦,不废话了,下面是我在互联网上看过对于 async/await 的介绍后自己的总结:

首先,从别人那得来的 async/await 规则:

  1. async 表示这是一个 async 函数,而 await 只能在这个函数里面使用。
  2. await 表示在这里等待 await 后面的操作执行完毕,再执行下一句代码。
  3. await 后面紧跟着的最好是一个耗时的操作或者是一个异步操作(当然非耗时的操作也可以的,但是就失去意义了)。

其实在使用 async/await 的时候最简单的场景就是当你需要执行一个耗时操作时或者必须为异步操作时就可以直接上,使用 async 来执行你的函数,在这个函数内部 使用 await 关键字来达到异步执行的最终目的:执行完毕(异步执行)了,可以运行下一行代码了!

这个时候 JS 代码就会向下一行进军了!一个简单的案例:

 1 let sleep = function (time) {
 2     return new Promise(function (resolve, reject) {
 3         setTimeout(function () {
 4             resolve();
 5         }, time);
 6     })
 7 };
 8
 9 let howLongToSleep = async function () {
10     // 在这里使用起来就像同步代码那样直观
11     console.time();
12     console.log(‘start‘);
13     await sleep(3000);  //sleep 为一个执行需要耗费 3s 的函数
14     console.timeEnd(‘end‘);
15 };
16
17 howLongToSleep();

这里你会发现先是打印出了 start 然后过了约 3s 的时候打印出了 end: 1496124446501.106ms

而在这里也可以直接拿到异步函数的返回值,例如上面的 howLongToSleep 函数中的 await sleep(3000) 可以直接获取到 sleep函数的返回值,直接用个变来那个保存即可使用了,也很方便的吧。

1 // 在 await 前面用变量保存即可;
2 let result = await sleep(3000);

这里会等待 sleep 函数完成后并将返回值返回后 await 的工作才算完成,这时候才会把的到的返回值赋值给 result 变量,而不是将函数体给了 result, 这点需要清楚。

如果你需要调用多个异步函数并且每隔指定时间执行其中一个的话不妨讲他们放到一个数组中执行:

let fnArr = [firstFn, secondFn, thirdFn];  // 数组中存放着需要顺序执行的函数

for(let v of fnArr ) {
    console.log(`当前是${v}函数开始执行...`);
    await v( params ); // 调用数组中的每个函数
}

不过,现在这些功能基本都还只在 node 中才能见到,浏览器端对于这些 ES6、ES7 的功能实现还是存在很大的兼容性问题,使用 babel 倒是可以实现大部分的代码功能,但是对于很多前端工作者来说事件比较麻烦的事,但是请坚信总有一天你会来浏览器端不需要 babel 也能爽的,所以先会了不坏,正所谓技多不压身嘛,如果你在学习 node 或者正准备学习 node 的话,请务必会!

结语:

以前不写博客的,都是看别人博客,学着写博客没有多久,有什么问题欢迎各位大佬们穿着女装来批评在下!本人一定虚心受教;

另外,如果发现本人的发表的博客有抄袭现象,请直接开骂!不要留情,我会在第一时间修改或者删除的,绝对不污染各位大佬的视野。

时间: 2024-10-12 05:41:28

ES7的Async/Await的简单理解的相关文章

小程序里使用es7的async await语法

我们做小程序开发时,有时候想让自己代码变得整洁,异步操作时避免回调地狱.我们会使用es6的promise. es7的async,await .promise在小程序和云开发的云函数里都可以使用. async和await只能在云开发的云函数里使用.我们在小程序的代码里直接使用,就会报如下错误. 这个报错就是告诉我们不能在小程序里直接使用es7的async和await语法.但是这么好的语法我们用起来确实显得代码整洁,逼格高.那接下来我就教大家如何在小程序代码里使用es7的async和await语法.

体验异步的终极解决方案-ES7的Async/Await

阅读本文前,期待您对promise和ES6(ECMA2015)有所了解,会更容易理解.本文以体验为主,不会深入说明,结尾有详细的文章引用. 第一个例子 Async/Await应该是目前最简单的异步方案了,首先来看个例子. 这里我们要实现一个暂停功能,输入N毫秒,则停顿N毫秒后才继续往下执行. 1 var sleep = function (time) { 2 return new Promise(function (resolve, reject) { 3 setTimeout(function

async/await的实质理解

async/await关键字能帮助开发者更容易地编写异步代码.但不少开发者对于这两个关键字的使用比较困惑,不知道该怎么使用.本文就async/await的实质作简单描述,以便大家能更清楚理解. 一.async的实质 async的实质是告诉调用者,async标记的方法可能包含异步代码.具体来说,以wait以分界点,async标记的方法被分为三个片段: static async void TestAsyncMethod() { someCode1(); //片段1 await Thask.Run(.

异步操作要了解的ES7的async/await

1.什么是async.await? async顾名思义是“异步”的意思,async用于声明一个函数是异步的.而await从字面意思上是“等待”的意思,就是用于等待异步完成.并且await只能在async函数中使用. 通常async.await都是跟随Promise一起使用的.为什么这么说呢?因为async返回的都是一个Promise对象同时async适用于任何类型的函数上.这样await得到的就是一个Promise对象(如果不是Promise对象的话那async返回的是什么 就是什么): awa

wepack打包时出错不压缩代码及使用es7(async await)新语法问题

1.打包时出错且不压缩代码是因为没有正确的转换语法 npm install babel-core babel-preset-env babel-loader --save-dev 2.如果使用了async await等es7新语法还要安装 npm install babel-plugin-transform-runtime --save-dev 3.webpack.config.js中配置 module:{ rules:[ { test:/(\.jsx|.js)$/, use:{ loader:

C#Async,await异步简单介绍

C# 5.0 引入了async/await,.net framework4.5开始支持该用法 使用: 由async标识的方法必须带有await,如果不带await,方法将被同步执行 static void Main(string[] args) { fun22(); Console.WriteLine($"Main await ThreadId {Thread.CurrentThread.ManagedThreadId}"); Console.ReadKey(); } private

.Net 4.5 的async 和await 的简单理解使用

原文地址:http://www.cnblogs.com/HJL-Blog/p/4432632.html 所谓的异步编程是利用CPU空闲时间和多核的特性,它所返回的Task或Task<TResult>是对await的一个承诺,当任务执行完毕后返回一个结果给接收者 方法签名包含一个 Async 或 async 修饰符. 按照约定,异步方法的名称以“Async”后缀结尾. 返回类型为下列类型之一: 如果你的方法有操作数为 TResult 类型的返回语句,则为 Task<TResult>.

异步async/await简单应用与探究

异步函数(async/await)简单应用 .NET Framework4.5提供了针对异步函数语法糖,简化了编写异步函数的复杂度. 下面通过一个简单的示例,介绍.NET Framework4.5对异步函数的支持. 示例代码 class Program { static void Main(string[] args) { EasyAsyncAwait(); Console.ReadLine(); } static async void EasyAsyncAwait() { //① Task<s

C#多线程和异步——Task和async/await详解

阅读目录 一.什么是异步 二.Task介绍 1 Task创建和运行 2 Task的阻塞方法(Wait/WaitAll/WaitAny) 3 Task的延续操作(WhenAny/WhenAll/ContinueWith) 4 Task的任务取消(CancellationTokenSource) 三.异步方法(async/await) 回到顶部 一.什么是异步 同步和异步主要用于修饰方法.当一个方法被调用时,调用者需要等待该方法执行完毕并返回才能继续执行,我们称这个方法是同步方法:当一个方法被调用时