三分钟学会用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 相关文章推荐
循环 vs 递归浅谈
Feb 28 Javascript
JS实现的4种数字千位符格式化方法分享
Mar 02 Javascript
javascript密码强度校验代码(两种方法)
Aug 10 Javascript
JQuery实现Ajax加载图片的方法
Dec 24 Javascript
AngularJs bootstrap搭载前台框架——准备工作
Sep 01 Javascript
字太多用...代替的方法(两种)
Mar 15 Javascript
JS滚动到指定位置导航栏固定顶部
Jul 03 Javascript
Vue 2.0学习笔记之使用$refs访问Vue中的DOM
Dec 19 Javascript
基于openlayers4实现点的扩散效果
Aug 17 Javascript
浅谈AngularJS中$http服务的简单用法
May 15 Javascript
vue鼠标悬停事件实例详解
Apr 01 Javascript
结合axios对项目中的api请求进行封装操作
Sep 21 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截取中文字符串不乱码的方法
2013/12/25 PHP
php使用flock阻塞写入文件和非阻塞写入文件的实例讲解
2017/07/10 PHP
JavaScript 设计模式 安全沙箱模式
2010/09/24 Javascript
jquery 操作DOM的基本用法分享
2012/04/05 Javascript
toggle一个div显示或隐藏且可扩展成自定义下拉框
2013/09/12 Javascript
使用jQuery实现验证上传图片的格式与大小
2014/12/03 Javascript
jQuery Ajax 上传文件处理方式介绍(推荐)
2016/06/30 Javascript
Bootstrap编写一个兼容主流浏览器的受众门户式风格页面
2016/07/01 Javascript
微信小程序新增的拖动组件movable-view使用教程
2017/05/20 Javascript
vue子父组件通信的实现代码
2017/07/09 Javascript
JavaScript基础之流程控制语句的用法
2017/08/31 Javascript
javascript 判断用户有没有操作页面
2017/10/17 Javascript
ui-router中使用ocLazyLoad和resolve的具体方法
2017/10/18 Javascript
在Vue项目中引入JQuery-ui插件的讲解
2019/01/27 jQuery
原生JavaScript实现滑动拖动验证的示例代码
2019/12/06 Javascript
React生命周期原理与用法踩坑笔记
2020/04/28 Javascript
浅谈使用nodejs搭建web服务器的过程
2020/07/20 NodeJs
[01:32]完美世界DOTA2联赛10月29日精彩集锦
2020/10/30 DOTA
在Python编程过程中用单元测试法调试代码的介绍
2015/04/02 Python
浅谈使用Python变量时要避免的3个错误
2017/10/30 Python
python format 格式化输出方法
2018/07/16 Python
windows安装TensorFlow和Keras遇到的问题及其解决方法
2019/07/10 Python
TensorFLow 不同大小图片的TFrecords存取实例
2020/01/20 Python
python3 正则表达式基础廖雪峰
2020/03/25 Python
Python爬虫如何破解JS加密的Cookie
2020/11/19 Python
python实现图像随机裁剪的示例代码
2020/12/10 Python
详解canvas绘制多张图的排列顺序问题
2019/01/21 HTML / CSS
东方红海科技面试题软件测试方面
2012/02/08 面试题
高中毕业生自我鉴定
2013/11/03 职场文书
自我鉴定三原则
2014/01/13 职场文书
美术专业个人自我评价
2014/01/18 职场文书
2014年教师节国旗下讲话稿
2014/09/10 职场文书
摘录式读书笔记
2015/07/01 职场文书
2015年学校政教工作总结
2015/07/20 职场文书
初中英语教学反思范文
2016/02/15 职场文书
SpringBoot集成MongoDB实现文件上传的步骤
2022/04/18 MongoDB