三分钟学会用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 相关文章推荐
jQuery的$.proxy()应用示例介绍
Apr 03 Javascript
bootstrap table 服务器端分页例子分享
Feb 10 Javascript
最流行的Node.js精简型和全栈型开发框架介绍
Feb 26 Javascript
JavaScript中匿名函数用法实例
Mar 23 Javascript
简介JavaScript中的sub()方法的使用
Jun 08 Javascript
jquery实现的判断倒计时是否结束代码
Feb 05 Javascript
js仿百度登录页实现拖动窗口效果
Mar 11 Javascript
微信小程序上传图片功能(附后端代码)
Jun 19 Javascript
详解Vue-cli中的静态资源管理(src/assets和static/的区别)
Jun 19 Javascript
小程序实现多列选择器
Feb 15 Javascript
详解如何在JS代码中消灭for循环
Dec 11 Javascript
vue添加自定义右键菜单的完整实例
Dec 08 Vue.js
详解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
使用dump函数,给php加断点测试
2013/06/25 PHP
php获取指定范围内最接近数的方法
2015/06/02 PHP
javascript实现的动态文字变换
2007/07/28 Javascript
JavaScript 仿关机效果的图片层
2008/12/26 Javascript
jQuery 相关控件的事件操作分解
2009/08/03 Javascript
javascript 伪数组实现方法
2010/10/11 Javascript
JavaScript 选中文字并响应获取的实现代码
2011/08/28 Javascript
createElement与createDocumentFragment的点点区别小结
2011/12/19 Javascript
鼠标经过显示二级菜单js特效
2013/08/13 Javascript
js实现的map方法示例代码
2014/01/13 Javascript
vue.js表格组件开发的实例详解
2016/10/12 Javascript
JS实现滑动门效果的方法详解
2016/12/19 Javascript
浅谈Javascript事件对象
2017/02/05 Javascript
JavaScript结合HTML DOM实现联动菜单
2017/04/05 Javascript
JavaScript用200行代码制作打飞机小游戏实例
2017/06/21 Javascript
vue数字类型过滤器的示例代码
2017/09/07 Javascript
node+express+ejs使用模版引擎做的一个示例demo
2017/09/18 Javascript
js的新生代垃圾回收知识点总结
2019/08/22 Javascript
Python的print用法示例
2014/02/11 Python
简述:我为什么选择Python而不是Matlab和R语言
2017/11/14 Python
Python获取Redis所有Key以及内容的方法
2019/02/19 Python
Django后端接收嵌套Json数据及解析详解
2019/07/17 Python
Python中使用threading.Event协调线程的运行详解
2020/05/02 Python
python实现时间序列自相关图(acf)、偏自相关图(pacf)教程
2020/06/03 Python
django模型类中,null=True,blank=True用法说明
2020/07/09 Python
巴西男士个人护理产品商店:SHOP4MEN
2017/08/07 全球购物
Booking.com德国:预订最好的酒店和住宿
2020/02/16 全球购物
到底Java是如何传递参数的?是by value或by reference?
2012/07/13 面试题
大学生自我鉴定范文
2013/12/28 职场文书
如何写自我鉴定
2014/03/19 职场文书
医学生自我鉴定范文
2014/03/26 职场文书
财务人员担保书
2014/05/13 职场文书
计划生育证明书写要求
2014/09/17 职场文书
2014年安全工作总结范文
2014/11/13 职场文书
关于SpringBoot 使用 Redis 分布式锁解决并发问题
2021/11/17 Redis
Python OpenCV形态学运算示例详解
2022/04/07 Python