javascript下使用Promise封装FileReader

 更新时间:2016年02月19日 15:59:54   作者:Meathill  
这篇文章主要介绍了javascript下使用Promise封装FileReader,需要的朋友可以参考下

Promise 在处理异步的时候是个很好的选择,可以减少嵌套层次,让代码更好读,逻辑更清晰。ES6 将其加入规范,jQuery 3.0 也修改实现向规范靠拢(3.0 发布公告)。一些新增元素比如 .fetch() 原生就 “thenable”,不过大多数以往的 API 还要依赖回调,这个时候,我们只要将它们重新封装,就能避开嵌套陷阱,享受 Promise 带来的愉悦体验。

Promise 一般用法
先来看下 Promise 的一般用法。

// 声明 Promise 对象
var p = new Promise(function (resolve, reject) {
 // 不管啥时候,该执行then了,就调用 resolve
 setTimeout(function () { 
  resolve(1);
 }, 5000);

 // 或者不管啥问题,就调用 reject
 if (somethingWrong) {
  reject('2');
 }   
});
  
// 使用 Promise 对象
p.then(function (num) {
 // 对应上面的 resolve
 console.log(num); // 1
}, function (num) {
 // 对应上面的 reject
 console.log(num); // 2
});

Promise 的驱动模型并不复杂:任何操作,假定它只有两个结果,成功或者失败。那么只需要在合适的时间调用合适的程序,进入合适的后续步骤即可。.then() 顾名思义,就是下一步的意思,当前面的 Promise 有了结果——即调用 resolve 或者 reject——之后,就启动对应的处理函数。

Promise 实例创建后就会开始执行,判定结果需要我们自己来,比如加载成功,或者满足某个条件,等等。通过串联 .then() 则可以完成一系列操作。每次调用 .then() 都会创建一个新的 Promise 实例,它会静静等待前面的实例状态改变后再开始执行。

封装 FileReader
接下来开始封装。思路很简单,FileReader 除了提供各种 read 方法,还有几个事件钩子,其中 onerror 和 onload 很明显可以作为判断任务是否完成的依据。加载成功的话,就需要用到文件内容,所以将文件或文件内容传递到下一步也十分必要。

最后完成的代码如下:

function reader (file, options) {
 options = options || {};
 return new Promise(function (resolve, reject) {
  let reader = new FileReader();

  reader.onload = function () {
   resolve(reader);
  };
  reader.onerror = reject;

  if (options.accept && !new RegExp(options.accept).test(file.type)) {
   reject({
    code: 1,
    msg: 'wrong file type'
   });
  }

  if (!file.type || /^text\//i.test(file.type)) {
   reader.readAsText(file);
  } else {
   reader.readAsDataURL(file);
  }
 });
}

为了能真正派上用场,里面还有一些验证文件类型的操作,不过跟本文主旨无关,略过不表。这段代码的核心是创建一个 Promise 对象,等待 FileReader 读取完成后调用 resolve 方法,或者出现问题时调用 reject 方法。

使用刚才封装好的函数
接下来就可以在项目中使用了:

reader(file)
 .then(function (reader) {
  console.log(reader.result);
 })
 .catch(function (error) {
  console.log(error);
 });

.then() 支持两个参数,第一个在 Promise 成功时启动,第二个自然在失败时启动。用 .catch() 可以实现同样地效果。Promise 的好处除了可读性更佳以外,返回的 Promise 对象还可以任意传递,继续进行链式调用,有很大想象空间。

继续 .then()
于是我们不妨串联更多操作(本来想写个断点续传的,回头再说吧):

全选复制放进笔记reader(file)

 .then(function (reader) {
  return new Promise(function (resolve, reject) {
   // 就随便暂停个5秒吧……
   setTimeout(function () {
    resolve(reader.result); 
   }, 5000);
  });
 })
 .then(function (content) {
  console.log(content);
 });

以上就是本文的全部内容,希望对大家的学习有所帮助。

相关文章

  • javascript bom是什么及bom和dom的区别

    javascript bom是什么及bom和dom的区别

    BOM是浏览器对象模型,DOM是文档对象模型,前者是对浏览器本身进行操作,而后者是对浏览器(可看成容器)内的内容进行操作。这篇文章给大家介绍javascript bom是什么及bom和dom的区别,感兴趣的朋友一起学习吧
    2015-11-11
  • js随机生成网页背景颜色的方法

    js随机生成网页背景颜色的方法

    这篇文章主要介绍了js随机生成网页背景颜色的方法,涉及javascript操作背景色的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-02-02
  • 浅谈toLowerCase和toLocaleLowerCase的区别

    浅谈toLowerCase和toLocaleLowerCase的区别

    下面小编就为大家带来一篇浅谈toLowerCase和toLocaleLowerCase的区别。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-08-08
  • Java Varargs 可变参数用法详解

    Java Varargs 可变参数用法详解

    在本篇文章里小编给大家整理了关于Java Varargs 可变参数使用以及相关知识点,需要的朋友们参考下。
    2020-01-01
  • JS数据类型判断的几种常用方法

    JS数据类型判断的几种常用方法

    这篇文章主要介绍了JS判断数据类型的几种常用方法,文中示例代码非常详细,帮助大家更好的理解和学习,感兴趣的朋友可以了解下
    2020-07-07
  • js实现简单音乐播放器

    js实现简单音乐播放器

    这篇文章主要介绍了js实现简单音乐播放器,可拖动进度条,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-06-06
  • Bootstrap 实现表格样式、表单布局的实例代码

    Bootstrap 实现表格样式、表单布局的实例代码

    这篇文章主要介绍了Bootstrap 实现表格样式、表单布局的实例代码,需要的朋友可以参考下
    2018-12-12
  • css静态滤镜 + A:Hover 效果

    css静态滤镜 + A:Hover 效果

    css静态滤镜 + A:Hover 效果...
    2007-05-05
  • js获取及修改网页背景色和字体色的方法

    js获取及修改网页背景色和字体色的方法

    这篇文章主要介绍了js获取及修改网页背景色和字体色的方法,涉及JavaScript针对页面元素属性的相关操作技巧,需要的朋友可以参考下
    2015-12-12
  • JavaScript自定义插件实现tabs切换功能

    JavaScript自定义插件实现tabs切换功能

    这篇文章主要为大家详细介绍了JavaScript自定义插件实现tabs切换功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-04-04

最新评论