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 相关文章推荐
创建一个类Person的简单实例
May 17 Javascript
jquery模拟多级复选框效果的简单实例
Jun 08 Javascript
全面理解闭包机制
Jul 11 Javascript
Angular.js跨controller实现参数传递的两种方法
Feb 20 Javascript
JavaScript校验Number(4,1)格式的数字实例代码
Mar 13 Javascript
js实现单张图片平移切换效果
Oct 11 Javascript
Bootstrap3.3.7导航栏下拉菜单鼠标滑过展开效果
Oct 31 Javascript
如何阻止小程序遮罩层下方图层滚动
Sep 05 Javascript
JavaScript中的函数申明、函数表达式、箭头函数
Dec 06 Javascript
JS实现烟花爆炸效果
Mar 10 Javascript
javascript实现贪吃蛇经典游戏
Apr 10 Javascript
html-webpack-plugin修改页面的title的方法
Jun 18 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/02/08 PHP
PHP sprintf() 函数的应用(定义和用法)
2012/06/29 PHP
CodeIgniter实现更改view文件夹路径的方法
2014/07/04 PHP
thinkphp常见路径用法分析
2014/12/02 PHP
使用laravel的Eloquent模型如何获取数据库的指定列
2019/10/17 PHP
判断用户是否在线的代码
2011/03/05 Javascript
一个级联菜单代码学习及removeClass与addClass的应用
2013/01/24 Javascript
jQuery select表单提交省市区城市三级联动核心代码
2014/06/09 Javascript
javascript实现window.print()去除页眉页脚
2014/12/30 Javascript
悬浮广告方法日常收集整理
2016/03/18 Javascript
如何让一个json文件显示在表格里【实现代码】
2016/05/09 Javascript
jquery轮播的实现方式 附完整实例
2016/07/28 Javascript
bootstrap+jQuery实现的动态进度条功能示例
2017/05/25 jQuery
JS如何实现在页面上快速定位(锚点跳转问题)
2017/08/14 Javascript
vue 全选与反选的实现方法(无Bug 新手看过来)
2018/02/09 Javascript
vue技术分享之你可能不知道的7个秘密
2018/04/09 Javascript
详解vue 项目白屏解决方案
2018/10/31 Javascript
微信小程序发送短信验证码完整实例
2019/01/07 Javascript
性能优化篇之Webpack构建速度优化的建议
2019/04/03 Javascript
VUE的history模式下除了index外其他路由404报错解决办法
2019/08/21 Javascript
[02:16]2018年度CS GO最具人气选手-完美盛典
2018/12/16 DOTA
Python脚本实现代码行数统计代码分享
2015/03/10 Python
浅谈python for循环的巧妙运用(迭代、列表生成式)
2017/09/26 Python
Python Django 简单分页的实现代码解析
2019/08/21 Python
Python 用turtle实现用正方形画圆的例子
2019/11/21 Python
django admin 根据choice字段选择的不同来显示不同的页面方式
2020/05/13 Python
HTML5添加禁止缩放功能
2017/11/03 HTML / CSS
医学专业应届生的自我评价
2014/02/28 职场文书
大型会议策划方案
2014/05/17 职场文书
2014年科研工作总结
2014/12/03 职场文书
欢迎词范文
2015/01/27 职场文书
计生个人工作总结
2015/02/28 职场文书
建国大业观后感
2015/06/01 职场文书
Springboot如何使用logback实现多环境配置?
2021/06/16 Java/Android
SpringBoot连接MySQL获取数据写后端接口的操作方法
2021/11/02 MySQL
Spring 使用注解开发
2022/05/20 Java/Android