es6学习笔记之Async函数的使用示例


Posted in Javascript onMay 11, 2017

前言

异步操作是 JavaScript 编程的麻烦事,麻烦到一直有人提出各种各样的方案,试图解决这个问题。

从最早的回调函数,到 Promise 对象,再到 Generator 函数,每次都有所改进,但又让人觉得不彻底。它们都有额外的复杂性,都需要理解抽象的底层运行机制。

异步I/O不就是读取一个文件吗,干嘛要搞得这么复杂?异步编程的最高境界,就是根本不用关心它是不是异步。

async 函数就是隧道尽头的亮光,很多人认为它是异步操作的终极解决方案。下面就来看看关于async函数的两个栗子:

栗子一:从豆瓣 API 获取数据

var fetchDoubanApi = function() { 
 return new Promise((resolve, reject) => {
 var xhr = new XMLHttpRequest();
 xhr.onreadystatechange = function() {
  if (xhr.readyState === 4) {
  if (xhr.status >= 200 && xhr.status < 300) {
   var response;
   try {
   response = JSON.parse(xhr.responseText);
   } catch (e) {
   reject(e);
   }
   if (response) {
   resolve(response, xhr.status, xhr);
   }
  } else {
   reject(xhr);
  }
  }
 };
 xhr.open('GET', 'https://api.douban.com/v2/user/aisk', true);
 xhr.setRequestHeader("Content-Type", "text/plain");
 xhr.send(data);
 });
};
(async function() {
 try {
 let result = await fetchDoubanApi();
 console.log(result);
 } catch (e) {
 console.log(e);
 }
})();

栗子二:根据电影文件名,自动下载对应的海报

import fs from 'fs';
import path from 'path';
import request from 'request';
var movieDir = __dirname + '/movies',
 exts  = ['.mkv', '.avi', '.mp4', '.rm', '.rmvb', '.wmv'];
// 读取文件列表
var readFiles = function () {
 return new Promise(function (resolve, reject) {
  fs.readdir(movieDir, function (err, files) {
   resolve(files.filter((v) => exts.includes(path.parse(v).ext)));
  });
 });
};
// 获取海报
var getPoster = function (movieName) {
 let url = `https://api.douban.com/v2/movie/search?q=${encodeURI(movieName)}`;
 return new Promise(function (resolve, reject) {
  request({url: url, json: true}, function (error, response, body) {
   if (error) return reject(error);
   resolve(body.subjects[0].images.large);
  })
 });
};
// 保存海报
var savePoster = function (movieName, url) {
 request.get(url).pipe(fs.createWriteStream(path.join(movieDir, movieName + '.jpg')));
};
(async () => {
 let files = await readFiles();
 // await只能使用在原生语法
 for (var file of files) {
  let name = path.parse(file).name;
  console.log(`正在获取【${name}】的海报`);
  savePoster(name, await getPoster(name));
 }
 console.log('=== 获取海报完成 ===');
})();

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
从零开始学习jQuery (六) jquery中的AJAX使用
Feb 23 Javascript
ExtJS中文乱码之GBK格式编码解决方案及代码
Jan 20 Javascript
js获取光标位置和设置文本框光标位置示例代码
Jan 09 Javascript
jQuery实现简单的列表式导航菜单效果代码
Aug 31 Javascript
分享一些常用的jQuery动画事件和动画函数
Nov 27 Javascript
深入理解JQuery循环绑定事件
Jun 02 Javascript
webpack学习教程之前端性能优化总结
Dec 05 Javascript
详解angular路由高亮之RouterLinkActive
Apr 28 Javascript
微信{"errcode":48001,"errmsg":"api unauthorized, hints: [ req_id: 1QoCla0699ns81 ]"}
Oct 12 Javascript
node中IO以及定时器优先级详解
May 10 Javascript
Vue.js watch监视属性知识点总结
Nov 11 Javascript
原生JavaScript之es6中Class的用法分析
Feb 23 Javascript
Node.js安装配置图文教程
May 10 #Javascript
使用bootstrap插件实现模态框效果
May 10 #Javascript
详解Vue用axios发送post请求自动set cookie
May 10 #Javascript
Node.js 异步异常的处理与domain模块解析
May 10 #Javascript
基于Node的React图片上传组件实现实例代码
May 10 #Javascript
JavaScript使用ZeroClipboard操作剪切板
May 10 #Javascript
VUE 更好的 ajax 上传处理 axios.js实现代码
May 10 #Javascript
You might like
PHP缓存技术的使用说明
2011/08/06 PHP
PHP容易忘记的知识点分享
2013/04/30 PHP
php使用filter_var函数判断邮箱,url,ip格式示例
2019/07/06 PHP
phpstudy2020搭建站点的实现示例
2020/10/30 PHP
借助JavaScript脚本判断浏览器Flash Player信息的方法
2014/07/09 Javascript
Javascript实现多彩雪花从天降散落效果的方法
2015/02/02 Javascript
jQuery实现仿美橙互联两级导航菜单效果完整实例
2015/09/17 Javascript
Prototype框架详解
2015/11/25 Javascript
详解Bootstrap创建表单的三种格式(一)
2016/01/04 Javascript
jQuery禁用键盘后退屏蔽F5刷新及禁用右键单击
2016/01/22 Javascript
JS基于clipBoard.js插件实现剪切、复制、粘贴
2016/05/03 Javascript
jQuery的each循环用法简单示例
2016/06/12 Javascript
Js动态设置rem来实现移动端字体的自适应代码
2016/10/14 Javascript
javascript实现圣旨卷轴展开效果(代码分享)
2017/03/23 Javascript
ES6使用let命令更简单的实现块级作用域实例分析
2017/03/31 Javascript
nodejs使用http模块发送get与post请求的方法示例
2018/01/08 NodeJs
如何快速解决JS或Jquery ajax异步跨域的问题
2018/01/08 jQuery
bootstrap table表格插件之服务器端分页实例代码
2018/09/12 Javascript
js实现图片局部放大效果详解
2019/03/18 Javascript
小程序使用watch监听数据变化的方法详解
2019/09/20 Javascript
JS校验与最终登陆界面功能完整示例
2020/01/13 Javascript
Ant Design Vue 添加区分中英文的长度校验功能
2020/01/21 Javascript
Python语言编写电脑时间自动同步小工具
2013/03/08 Python
Python中xml和json格式相互转换操作示例
2018/12/05 Python
python+opencv实现阈值分割
2018/12/26 Python
解决Pytorch训练过程中loss不下降的问题
2020/01/02 Python
opencv python Canny边缘提取实现过程解析
2020/02/03 Python
Python文件操作模拟用户登陆代码实例
2020/06/09 Python
使用BeautifulSoup4解析XML的方法小结
2020/12/07 Python
中国电视购物:快乐购
2017/02/04 全球购物
瑞典首都斯德哥尔摩的多元奢侈时尚品牌:Acne Studios
2017/07/09 全球购物
《猫》教学反思
2014/02/26 职场文书
节约粮食标语
2014/06/18 职场文书
在职证明范本
2015/06/15 职场文书
大学自主招生自荐信(2016精选篇)
2016/01/28 职场文书
Arthas排查Kubernetes中应用频繁挂掉重启异常
2022/02/28 MySQL