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 弹出层插件实现代码
Oct 24 Javascript
javascript 文件的同步加载与异步加载实现原理
Dec 13 Javascript
复制js对象方法(详解)
Jul 08 Javascript
js检测网络是否具体连接功能的代码
May 23 Javascript
js文本框走动跑马灯效果代码分享
Aug 25 Javascript
Jquery实现上下移动和排序代码
Oct 17 Javascript
值得分享的Bootstrap Table使用教程
Nov 23 Javascript
mac上node.js环境的安装测试
Jul 03 Javascript
利用JS动态生成隔行换色HTML表格的两种方法
Oct 09 Javascript
d3绘制基本的柱形图的实现代码
Dec 12 Javascript
Vue-cli3.X使用px2 rem遇到的问题及解决方法
Aug 08 Javascript
解决layer弹出层中表单不起作用的问题
Sep 09 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中的加密功能
2006/10/09 PHP
Laravel5中contracts详解
2015/03/02 PHP
PHP读取XML格式文件的方法总结
2017/02/27 PHP
phpStudy 2016 使用教程详解(支持PHP7)
2017/10/18 PHP
新手入门常用代码集锦
2007/01/11 Javascript
jquery插件制作 提示框插件实现代码
2012/08/17 Javascript
JSONP跨域的原理解析及其实现介绍
2014/03/22 Javascript
WordPress中鼠标悬停显示和隐藏评论及引用按钮的实现
2016/01/12 Javascript
用jQuery向div中添加Html文本内容的简单实现
2016/07/13 Javascript
jQuery的Read()方法代替原生JS详解
2016/11/08 Javascript
VUE元素的隐藏和显示(v-show指令)
2017/06/23 Javascript
JavaScript与Java正则表达式写法的区别介绍
2017/08/15 Javascript
基于vue组件实现猜数字游戏
2020/05/28 Javascript
jQuery.Sumoselect插件实现下拉复选框效果
2017/11/09 jQuery
jQuery 获取除某指定对象外的其他对象 ( :not() 与.not())
2018/10/10 jQuery
ES6 更易于继承的类语法的使用
2019/02/11 Javascript
JS实现横向轮播图(初级版)
2020/06/24 Javascript
浅谈Vue组件单元测试究竟测试什么
2020/02/05 Javascript
Python中正则表达式的详细教程
2015/04/30 Python
Python使用pylab库实现画线功能的方法详解
2017/06/08 Python
教你用 Python 实现微信跳一跳(Mac+iOS版)
2018/01/04 Python
一文了解Python并发编程的工程实现方法
2019/05/31 Python
python django下载大的csv文件实现方法分析
2019/07/19 Python
Python爬虫:将headers请求头字符串转为字典的方法
2019/08/21 Python
python实现一个猜拳游戏
2020/04/05 Python
互斥锁解决 Python 中多线程共享全局变量的问题(推荐)
2020/09/28 Python
CSS3教程:background-clip和background-origin
2008/10/17 HTML / CSS
html5实现移动端适配完美写法
2017/11/16 HTML / CSS
春秋航空官方网站:Spring Airlines
2017/09/27 全球购物
美国马匹用品和骑马配件购物网站:Horse.com
2018/01/08 全球购物
杭州-飞时达软件有限公司.net笔面试
2012/04/28 面试题
学期研究性学习个人的自我评价
2014/01/09 职场文书
银行优秀员工事迹
2014/02/06 职场文书
工艺技术员岗位职责
2015/02/04 职场文书
初中语文教学反思范文
2016/03/03 职场文书
react如何快速设置文件路径别名
2021/04/28 Javascript