三分钟学会用ES7中的Async/Await进行异步编程


Posted in Javascript onJune 14, 2018

本文介绍了三分钟学会用ES7中的Async/Await进行异步编程,分享给大家,具体如下:

Async/Await基本规则

  1. async 表示这是一个async函数,await只能用在这个函数里面。
  2. await 表示在这里等待promise返回结果了,再继续执行。
  3. await 后面跟着的应该是一个promise对象(当然,其他返回值也没关系,只是会立即执行,不过那样就没有意义了…)

一个Async/Await例子

Async/Await应该是目前最简单的异步方案了,首先来看个例子。

这里我们要实现一个暂停功能,输入N毫秒,则停顿N毫秒后才继续往下执行。

var sleep = function (time) {
  return new Promise(function (resolve, reject) {
    setTimeout(function () {
      resolve();
    }, time);
  })
};

var start = async function () {
  // 在这里使用起来就像同步代码那样直观
  console.log('start');
  await sleep(3000);
  console.log('end');
};

start();

控制台先输出start,稍等3秒后,输出了end。

获得返回值

await等待的虽然是promise对象,但不必写.then(..),直接可以得到返回值。

var sleep = function (time) {
  return new Promise(function (resolve, reject) {
    setTimeout(function () {
      // 返回 ‘ok'
      resolve('ok');
    }, time);
  })
};

var start = async function () {
  let result = await sleep(3000);
  console.log(result); // 收到 ‘ok'
};

捕捉错误

既然.then(..)不用写了,那么.catch(..)也不用写,可以直接用标准的try catch语法捕捉错误。

var sleep = function (time) {
  return new Promise(function (resolve, reject) {
    setTimeout(function () {
      // 模拟出错了,返回 ‘error'
      reject('error');
    }, time);
  })
};

var start = async function () {
  try {
    console.log('start');
    await sleep(3000); // 这里得到了一个返回错误
    
    // 所以以下代码不会被执行了
    console.log('end');
  } catch (err) {
    console.log(err); // 这里捕捉到错误 `error`
  }
};

循环多个await

await看起来就像是同步代码,所以可以理所当然的写在for循环里,不必担心以往需要闭包才能解决的问题。

..省略以上代码

var start = async function () {
  for (var i = 1; i <= 10; i++) {
    console.log(`当前是第${i}次等待..`);
    await sleep(1000);
  }
};

值得注意的是,await必须在async函数的上下文中的。

..省略以上代码

let 一到十 = [1,2,3,4,5,6,7,8,9,10];

// 错误示范
一到十.forEach(function (v) {
  console.log(`当前是第${v}次等待..`);
  await sleep(1000); // 错误!! await只能在async函数中运行
});

// 正确示范
for(var v of 一到十) {
  console.log(`当前是第${v}次等待..`);
  await sleep(1000); // 正确, for循环的上下文还在async函数中
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript去掉空格的方法集合
Dec 28 Javascript
jQuery渐变发光导航菜单的实例代码
Mar 27 Javascript
javascript中取前n天日期的两种方法分享
Jan 26 Javascript
jquery实现个人中心导航菜单效果和美观都非常不错
Sep 02 Javascript
网站基于flash实现的Banner图切换效果代码
Oct 14 Javascript
jQuery中die()方法用法实例
Jan 19 Javascript
学习Javascript闭包(Closure)知识
Aug 07 Javascript
Bootstrap中定制LESS-颜色及导航条(推荐)
Nov 21 Javascript
Vue中fragment.js使用方法详解
Mar 09 Javascript
BootStrap自定义popover,点击区域隐藏功能的实现
Jan 23 Javascript
微信小程序实现签到功能
Oct 31 Javascript
vue proxy 的优势与使用场景实现
Jun 15 Javascript
详解React中setState回调函数
Jun 14 #Javascript
JavaScript 判断对象中是否有某属性的常用方法
Jun 14 #Javascript
Vue.js添加组件操作示例
Jun 13 #Javascript
vue 项目打包通过命令修改 vue-router 模式 修改 API 接口前缀
Jun 13 #Javascript
clipboard.js在移动端复制失败的解决方法
Jun 13 #Javascript
ES6与CommonJS中的模块处理的区别
Jun 13 #Javascript
浅谈webpack 构建性能优化策略小结
Jun 13 #Javascript
You might like
php上传、管理照片示例
2006/10/09 PHP
实用函数3
2007/11/08 PHP
PHP的范围解析操作符(::)的含义分析说明
2011/07/03 PHP
Thinkphp+smarty+uploadify实现无刷新上传
2015/07/30 PHP
php精确的统计在线人数的方法
2015/10/21 PHP
php字符串操作常见问题小结
2016/10/11 PHP
PHP使用DOM和simplexml读取xml文档的方法示例
2017/02/08 PHP
Ajax+PHP实现的分类列表框功能示例
2019/02/11 PHP
Prototype Object对象 学习
2009/07/12 Javascript
javascript appendChild,innerHTML,join性能比较代码
2009/08/29 Javascript
关于hashchangebroker和statehashable的补充文档
2011/08/08 Javascript
jQuery插件编写步骤详解
2016/06/03 Javascript
详解vue之页面缓存问题(基于2.0)
2017/01/10 Javascript
你应该知道的几类npm依赖包管理详解
2017/10/06 Javascript
vue.js项目打包上线的图文教程
2017/11/16 Javascript
原生实现一个react-redux的代码示例
2018/06/08 Javascript
js中时间格式化的几种方法
2018/07/22 Javascript
openlayers 3实现车辆轨迹回放
2020/09/24 Javascript
如何利用nodejs自动定时发送邮件提醒(超实用)
2020/12/01 NodeJs
python实现telnet客户端的方法
2015/04/15 Python
python实现rsa加密实例详解
2017/07/19 Python
创建Django项目图文实例详解
2019/06/06 Python
使用PyInstaller将Pygame库编写的小游戏程序打包为exe文件及出现问题解决方法
2019/09/06 Python
解决pycharm上的jupyter notebook端口被占用问题
2019/12/17 Python
Python动态导入模块:__import__、importlib、动态导入的使用场景实例分析
2020/03/30 Python
YSL圣罗兰美妆官方旗舰店:购买YSL口红
2018/04/16 全球购物
诗普兰迪官方网站:Splendid
2018/09/18 全球购物
爱尔兰橄榄球店:Irish Rugby Store
2019/12/05 全球购物
C++面试题目
2013/06/25 面试题
数据员岗位职责
2013/11/19 职场文书
管道维修工岗位职责
2013/12/27 职场文书
初中生期末评语大全
2014/04/24 职场文书
房屋买卖委托书格式范本格式
2014/10/13 职场文书
12.4全国法制宣传日活动方案
2014/11/02 职场文书
Spring boot应用启动后首次访问很慢的解决方案
2021/06/23 Java/Android
Python实现对齐打印 format函数的用法
2022/04/28 Python