| 学习笔记 | 您所在的位置：网站首页 › race原型 › 学习笔记 |
|
这是我参与8月更文挑战的第2天，活动详情查看：8月更文挑战 日常的学习笔记，包括 ES6、Promise、Node.js、Webpack、http 原理、Vue 全家桶，后续可能还会继续更新 Typescript、Vue3 和 常见的面试题 等等。 Promise静态方法这篇文章只记录实现，不记录用法。 之前我们封装了一个符合 promise/A+ 规范的类库 Promise，那现在我们来实现一下类库中包含的静态方法。 Promise.resolve()Promise.resolve(100) 等价于 new Promise((resolve,reject)=>{resolve(100)}) 实现此方法非常简单，在我们实现好的类库中添加静态方法。 static resolve(val) { return new Promise((resolve, reject) => { resolve(val) }) } Promise.reject()Promise.reject(100) 等价于 new Promise((resolve,reject)=>{reject(100)}) 实现此方法也非常简单，在我们实现好的类库中添加静态方法。 static reject(val) { return new Promise((resolve, reject) => { reject(val) }) } Promise.catch()Promise.catch() 等价于 .then(null, () => {}) 所以我们可以直接在类库中实现此方法 catch (errorFn) { return this.then(null, errorFn) } Promise.all()现有如下代码 let promise1 = new Promise((resolve, reject) => {resolve(100)}) let promise2 = new Promise((resolve, reject) => {reject(200)}) let promise3 = new Promise((resolve, reject) => {resolve(300)}) let promise4 = new Promise((resolve, reject) => {resolve(400)}) Promise.all([promise1, promise2, promise3, promise4]).then(result => { console.log(result); }).catch(reason => { console.log(reason); // 200 })有多个Promise实例，当所有的实例都执行完毕后，才会执行其成功结果。当其中有一个实例失败了，整个Promise.all的结果都会变成失败。 根据上述结论，我们可以试着实现Promise.all() static all(promises) { return new Promise((resolve, reject) => { let results = [] let times = 0 const processSuccess = (index, val) => { results[index] = val; if (++times === promises.length) { resolve(results) } } for (let i = 0; i < promises.length; i++) { let p = promises[i]; if (p && typeof p.then === 'function') { p.then(result => { processSuccess(i, result) }, reject) } else { processSuccess(i, p) } } }) } Promise.race()有多个Promise实例，最先执行完成的实例返回结果后，整个Promise.race 就执行完毕了。 static race(promises) { return new Promise((resolve, reject) => { for (let i = 0; i < promises.length; i++) { let p = promises[i] if (p && typeof p.then === 'function') { p.then(resolve, reject) } else { resolve(p) } } }) } 实际案例实际工作中，Promise.race() 可以用来处理 图片加载失败 或者 脚本加载超时 等问题。 function wrap(p1) { let abort; let p = new Promise((resolve, reject) => { abort = reject; }) let p2 = Promise.race([p, p1]); // 将自定义的错误Promise和自己设定的Promise组合 p2.abort = abort; return p2; } // 使用 let p1 = new Promise( ... ) // 需要处理的Promise异步操作 let promise = wrap(p1); promise.then(result=>{ ... },reason=>{ ... }) // 成功或失败的回调 // 超时处理 setTimeout(() => { promise.abort(); // 设定超时时间为60s }, 60000);封装一个wrap() 函数，接受参数是 Promise 数组。在函数内设定一个属性值 abort，abort 获取值一个新的Promise中的reject方法。 这样wrap函数中的abort就相当于一个中断按钮。 Promise.finally()无论Promise成功还是失败，都会执行此方法，他不会接受上一层 .then 方法传递的参数。 执行过后，代码会继续执行（后续的 .then 方法会继续执行），如果在.finally() 中返回一个新的 Promise，Promise除了失败结果，任何结果都不会被传递下去。 finally(onFinally) { return this.then( // Promise.resolve 可以等待回调中的Promise执行完毕 value => Promise.resolve(onFinally()).then(() => value), reason => Promise.resolve(onFinally()).then(() => { throw reason }) ) } Promise.allSettled有多个Promise实例，当所有的实例都执行完毕后，会将所有结果全部返回，无论结果是正确还是错误的。所以他不会走.catch方法。 Promise.any有多个Promise实例，如果其中有一个成功了，就会走其成功结果（取出第一个成功的值），只有全部失败了，才会走失败结果。 promisify我在上一篇文章中，曾经封装过一个 Promise 的异步函数 readFile ，当时用了一种很麻烦的封装方式。 const fs = require('fs'); function readFile(path, encoding) { return new Promise((resolve, reject) => { fs.readFile(path, encoding, (err, data) => { if (err) reject(err) resolve(data) }) }) } readFile('./a.txt', 'utf8').then(result => { console.log(result) })那我们有没有什么简单的方法可以使用呢？答案是 有的。 Node中内置模块 util 中有一个 promisify 方法，可以神奇的将 异步函数 转换成 Promise。 const fs = require('fs'); const util = require('util'); let readFile = util.promisify(fs.readFile) // 省略了自己的封装过程 readFile('./a.txt', 'utf8').then(result => { console.log(result) })现在我们可以尝试自己手写一下其 实现原理 function promisify(readFile) { return function (...args) { return new Promise((resolve, reject) => { readFile(...args, (err, data) => { if (err) return reject(err) resolve(data) }) }) } }这样我们就手写了一个 promisify 方法。 本篇文章由莫小尚创作，文章中如有任何问题和纰漏，欢迎您的指正与交流。 您也可以关注我的 个人站点、博客园 和 掘金，我会在文章产出后同步上传到这些平台上。 最后感谢您的支持！ |
| CopyRight 2018-2019 实验室设备网 版权所有 |