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 使用form表单select类实现级联菜单效果
Dec 19 Javascript
javascript间隔刷新的简单实例
Nov 14 Javascript
JS中判断null、undefined与NaN的方法
Mar 24 Javascript
22点关于jquery性能优化的建议
May 28 Javascript
scrollWidth,clientWidth,offsetWidth的区别
Jan 13 Javascript
跟我学习javascript的this关键字
May 28 Javascript
JavaScript数组方法总结分析
May 06 Javascript
Js 获取、判断浏览器版本信息的简单方法
Aug 08 Javascript
Vue.js事件处理器与表单控件绑定详解
Mar 20 Javascript
关于微信公众号开发无法支付的问题解决
Dec 28 Javascript
细说Vue组件的服务器端渲染的过程
May 30 Javascript
解决vue-cli输入命令vue ui没效果的问题
Nov 17 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大小写问题:函数名和类名不区分,变量名区分
2013/06/17 PHP
解析WordPress中函数钩子hook的作用及基本用法
2015/12/22 PHP
Yii2-GridView 中让关联字段带搜索和排序功能示例
2017/01/21 PHP
浅谈ThinkPHP中initialize和construct的区别
2017/04/01 PHP
javascript encodeURI和encodeURIComponent的比较
2010/04/03 Javascript
根据一段代码浅谈Javascript闭包
2010/12/14 Javascript
查找页面中所有类为test的结点的方法
2014/03/28 Javascript
jQuery中parent()方法用法实例
2015/01/07 Javascript
js实现同一个页面多个渐变效果的方法
2015/04/10 Javascript
js跨浏览器的事件侦听器和事件对象的使用方法
2015/12/17 Javascript
jQuery树形控件zTree使用小结
2016/08/02 Javascript
移动端js图片查看器
2016/11/17 Javascript
JavaScript之Vue.js【入门基础】
2016/12/06 Javascript
Jquery给当前页或者跳转后页面的导航栏添加选中后样式的实例
2016/12/08 Javascript
BootStrap表单宽度设置方法
2017/03/10 Javascript
bootstrap响应式表格实例详解
2017/05/15 Javascript
Next.js实现react服务器端渲染的方法示例
2019/01/06 Javascript
Javascript之高级数组API的使用实例
2019/03/08 Javascript
详解vue 图片上传功能
2019/04/30 Javascript
Python深入学习之对象的属性
2014/08/31 Python
python多线程之事件Event的使用详解
2018/04/27 Python
Python Django框架实现应用添加logging日志操作示例
2019/05/17 Python
Python3 Tensorlfow:增加或者减小矩阵维度的实现
2020/05/22 Python
Html5中的桌面通知Notification的实现
2018/09/25 HTML / CSS
使用layui实现左侧菜单栏及动态操作tab项的方法
2020/11/10 HTML / CSS
天巡全球:Skyscanner Global
2017/06/20 全球购物
英国手工制作的现代与经典的沙发和床:Love Your Home
2020/09/26 全球购物
活动总结报告怎么写
2014/07/03 职场文书
生产工厂门卫岗位职责
2014/09/26 职场文书
乡镇领导班子四风整顿行动工作汇报
2014/10/25 职场文书
2015年保安个人工作总结
2015/04/02 职场文书
MySQL如何构建数据表索引
2021/05/13 MySQL
css背景和边框标签实例详解
2021/05/21 HTML / CSS
MIME类型中application/xml与text/xml的区别介绍
2022/01/18 HTML / CSS
asyncio异步编程之Task对象详解
2022/03/13 Python
Android开发之WECHAT微信小程序路由跳转的两种形式
2022/04/12 Java/Android