三分钟学会用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插件开发 对话框插件开发
Apr 26 Javascript
10分钟学会写Jquery插件实例教程
Sep 06 Javascript
Web表单提交之disabled问题js解决方法
Jan 13 Javascript
javascript中clipboardData对象用法详解
May 13 Javascript
JavaScript实现自动对页面上敏感词进行屏蔽的方法
Jul 27 Javascript
javascript实现随机读取数组的方法
Aug 03 Javascript
js实现的早期滑动门菜单效果代码
Aug 27 Javascript
jQuery删除节点用法示例(remove方法)
Sep 08 Javascript
JS获取鼠标位置距浏览器窗口距离的方法示例
Apr 11 Javascript
详解Angular-cli生成组件修改css成less或sass的实例
Jul 27 Javascript
jQuery实现通过方向键控制div块上下左右移动的方法【测试可用】
Apr 26 jQuery
为jquery的ajax请求添加超时timeout时间的操作方法
Sep 04 jQuery
详解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 shell超强免杀、减少体积工具实现代码
2012/10/16 PHP
php字符串过滤与替换小结
2015/01/26 PHP
php猜单词游戏
2015/09/29 PHP
[原创]解决wincache不支持64位PHP5.5/5.6的问题(提供64位wincache下载)
2016/06/22 PHP
php反射学习之依赖注入示例
2019/06/14 PHP
Laravel + Elasticsearch 实现中文搜索的方法
2020/02/02 PHP
JS判断移动端访问设备并加载对应CSS样式
2014/06/13 Javascript
利用a标签自动解析URL分析网址实例
2014/10/20 Javascript
angularJS提交表单(form)
2015/02/09 Javascript
js带缩略图的图片轮播效果代码分享
2015/09/14 Javascript
Javascript验证方法大全
2015/09/21 Javascript
JS代码实现根据时间变换页面背景效果
2016/06/16 Javascript
React利用插件和不用插件实现双向绑定的方法详解
2017/07/03 Javascript
微信小程序点击控件修改样式实例详解
2017/07/07 Javascript
详解vue 组件之间使用eventbus传值
2017/10/25 Javascript
浅谈ElementUI中switch回调函数change的参数问题
2018/08/24 Javascript
Vue中插入HTML代码的方法
2018/09/21 Javascript
用Cordova打包Vue项目的方法步骤
2019/02/02 Javascript
node.js Promise对象的使用方法实例分析
2019/12/26 Javascript
[10:21]2018DOTA2国际邀请赛寻真——Winstrike
2018/08/11 DOTA
Python创建xml的方法
2015/03/10 Python
Windows下用py2exe将Python程序打包成exe程序的教程
2015/04/08 Python
python搭建虚拟环境的步骤详解
2016/09/27 Python
python 产生token及token验证的方法
2018/12/26 Python
python实现音乐播放器 python实现花框音乐盒子
2020/02/25 Python
德国狗狗用品在线商店:Schecker
2017/03/17 全球购物
英国浴室洗脸盆购物网站:Click Basin
2018/06/08 全球购物
大二学期个人自我评价
2014/01/13 职场文书
小学生安全保证书
2014/02/01 职场文书
卫生安全检查制度
2014/02/04 职场文书
民族团结先进个人材料
2014/02/05 职场文书
人大调研汇报材料
2014/08/14 职场文书
2014党员干部四风问题对照检查材料思想汇报
2014/09/24 职场文书
公安交警中队队长个人对照检查材料思想汇报
2014/10/05 职场文书
2014大学班主任工作总结
2014/11/08 职场文书
公务员年度考核评语
2014/12/31 职场文书