时间:2021-05-26
Promise 在处理异步的时候是个很好的选择,可以减少嵌套层次,让代码更好读,逻辑更清晰。ES6 将其加入规范,jQuery 3.0 也修改实现向规范靠拢(3.0 发布公告)。一些新增元素比如 .fetch() 原生就 “thenable”,不过大多数以往的 API 还要依赖回调,这个时候,我们只要将它们重新封装,就能避开嵌套陷阱,享受 Promise 带来的愉悦体验。
Promise 一般用法
先来看下 Promise 的一般用法。
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 方法。
使用刚才封装好的函数
接下来就可以在项目中使用了:
.then() 支持两个参数,第一个在 Promise 成功时启动,第二个自然在失败时启动。用 .catch() 可以实现同样地效果。Promise 的好处除了可读性更佳以外,返回的 Promise 对象还可以任意传递,继续进行链式调用,有很大想象空间。
继续 .then()
于是我们不妨串联更多操作(本来想写个断点续传的,回头再说吧):
全选复制放进笔记reader(file)
以上就是本文的全部内容,希望对大家的学习有所帮助。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
wx-promise-request是对微信小程序wx.request方法的异步封装。解决问题支持Promise(使用es6-promise库)。管理请求队列,
现在应该大部分公司都是前后端分离了。so,数据请求的封装还是必须的。为了实现向ios中block封装请求的异步的效果,我采用JavaScript中promise
JavaScript的Promise.all()Promise是JavaScript异步编程的一种解决方案,在ES6中引入。通过Promise.all()可以实
昨天更新的是“JavaScript中的Promise使用详解”,其实也就是说了下基本用法和自己对Promise的理解,可能有错误之处,也欢迎指出。今天就说一说“
前言Promise是JavaScript异步操作解决方案,最近看到项目里不少人用了Promise的库类,比如bluebird、q、jQuery.Deffered