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 相关文章推荐
JS window.opener返回父页面的应用
Oct 24 Javascript
引用外部js乱码问题分析及解决方案
Apr 12 Javascript
关闭浏览器时提示onbeforeunload事件
Dec 25 Javascript
js document.write()使用介绍
Feb 21 Javascript
jQuery实现div拖拽效果实例分析
Feb 20 Javascript
jQuery获取浏览器类型和版本号的方法
Jul 05 Javascript
AngularJS监听路由的变化示例代码
Sep 23 Javascript
JS定时器实现数值从0到10来回变化
Dec 09 Javascript
bootstrap插件treeview实现全选父节点下所有子节点和反选功能
Jul 21 Javascript
JS严格模式知识点总结
Feb 27 Javascript
详解vue-router导航守卫
Jan 19 Javascript
Vue的路由及路由钩子函数的实现
Jul 02 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
完美解决令人抓狂的zend studio 7代码提示(content Assist)速度慢的问题
2013/06/20 PHP
实现复选框全选/全不选切换
2006/12/23 Javascript
IE关闭时判断及AJAX注销案例学习
2013/02/18 Javascript
IE的fireEvent方法概述及应用
2013/02/22 Javascript
通过JS来判断页面控件是否获取焦点
2014/01/03 Javascript
javascript实现动态模态绑定grid过程代码
2014/09/22 Javascript
jQuery的context属性用法实例
2014/12/27 Javascript
js实现创建删除html元素小结
2015/09/30 Javascript
全面解析Bootstrap图片轮播效果
2015/12/03 Javascript
jQuery使用animate实现ul列表项相互飘动效果示例
2016/09/16 Javascript
JavaScript队列的应用实例详解【经典数据结构】
2017/04/12 Javascript
vue2实现移动端上传、预览、压缩图片解决拍照旋转问题
2017/04/13 Javascript
JS获取数组中出现次数最多及第二多元素的方法
2017/10/27 Javascript
微信小程序分享功能之按钮button 边框隐藏和点击隐藏
2018/06/14 Javascript
详解webpack打包nodejs项目(前端代码)
2018/09/19 NodeJs
详解Vue中使用Axios拦截器
2019/04/22 Javascript
D3.js(v3)+react 实现带坐标与比例尺的散点图 (V3版本)
2019/05/09 Javascript
Vue监听页面刷新和关闭功能
2019/06/20 Javascript
vuejs+element UI table表格中实现禁用部分复选框的方法
2019/09/20 Javascript
Vue开发环境跨域访问问题
2020/01/22 Javascript
[47:31]完美世界DOTA2联赛PWL S3 INK ICE vs DLG 第一场 12.12
2020/12/16 DOTA
自己使用总结Python程序代码片段
2015/06/02 Python
Python的Django框架中模板碎片缓存简介
2015/07/24 Python
python按比例随机切分数据的实现
2019/07/11 Python
Python 获取numpy.array索引值的实例
2019/12/06 Python
TensorFlow——Checkpoint为模型添加检查点的实例
2020/01/21 Python
python sitk.show()与imageJ结合使用常见的问题
2020/04/20 Python
自荐信怎么写好
2013/11/11 职场文书
入党积极分子自我鉴定范文
2014/03/25 职场文书
2014年会策划方案
2014/05/11 职场文书
法定代表人资格证明书
2014/09/11 职场文书
写给妈妈的感谢信
2015/01/22 职场文书
植物园观后感
2015/06/11 职场文书
田径运动会通讯稿
2015/07/18 职场文书
2019年中,最受大众欢迎的6本新书
2019/08/07 职场文书
python保存图片的四个常用方法
2022/02/28 Python