关于那些变化万千,开箱即用的 Promise 高度封装方法
前言
在日常开发中,我们少不了使用 Promise,而透过封装抽象方法,可以避免造轮子,写出更加优雅的代码。例如:将任意函数,化为具有异步能力的函数、改装成具有并发上千万请求的函数、使用 Web Worker 来使用不同线程、暂停若干秒再继续。这裡就让我们一起来动手封装这些方法吧。
promisify
无论什么函数,我们也可以将它化为异步函数。 这里使用 currying 来返回一个函数,再返回一个 Promise 来调用原本的函数。
而且,可以用 ...rest 来传递所有参数,而不是 arguments。
const promisify = func => (...args) =>
new Promise((resolve, reject) =>
func(...args, (err, result) => (err ? reject(err) : resolve(result)))
);
使用方法
const delay = promisify((d, cb) => setTimeout(cb, d));
delay(2000)
.then(() => console.log('Hello World!'));
值得一提的是,如果你的 Node.js 版本为 8 以上,你可以使用 util.promisify。
const util = require('util');
const fs = require('fs');
const stat = util.promisify(fs.stat);
stat('.').then((stats) => {
// 做你要做的事情
}).catch((error) => {
// 处理错误
});
你也可以使用 async/await 版本:
const util = require('util');
const fs = require('fs');
const stat = util.promisify(fs.stat);
async function callStat() {
const stats = await stat('.');
console.log(`This directory is owned by ${stats.uid}`);
}
runAsync
使用 Web Worker 来在独立线程调用函数,避免阻塞 UI 交互。 我们首先会使用Blob 对象链接来创建一个 Worker,里面的内容是纯字符串的函数。 然后,马上使用这个 worker,并返回一个 Promise。 监听 onmessage 及 onerror 事件,然后处理返回的 data。
代码片段:
const runAsync = fn => {
const worker = new Worker(
URL.createObjectURL(new Blob([`postMessage((${fn})());`]), {
type: 'application/javascript; charset=utf-8'
})
);
return new Promise((res, rej) => {
worker.onmessage = ({ data }) => {
res(data), worker.terminate();
};
worker.onerror = err => {
rej(err), worker.terminate();
};
});
};
使用例子:
const longRunningFunction = () => {
let result = 0;
for (let i = 0; i < 1000; i++) {
for (let j = 0; j < 700; j++) {
for (let k = 0; k < 300; k++) {
result = result + i + j + k;
}
}
}
return result;
};
runAsync(longRunningFunction).then(console.log); // 209685000000
runAsync(() => 10 ** 3).then(console.log); // 1000
值得注意的是,由于函数运行的环境不同,所有变量和函数都需要在裡面定义。 使用外部变量的话,会出现问题:
let outsideVariable = 50;
runAsync(() => typeof outsideVariable).then(console.log); // 'undefined'同时执行 Promise
如果想要一次性地几千个请求的话,使用 Promise.all() 方法就可以达到并发的效果了。
使用方法:
const test = time => new Promise(resolve => {
setTimeout(() => resolve(time), time);
});
const temp = [test(1000), test(2000), test(3000)];
Promise.all(temp).then(console.log); // [1000, 2000, 3000]
runPromisesInSeries
如果你想要一个个串联,运行一系列的 Promise的话,可以使用 Array.prototype.reduce() 来製造一个 Promise 的链。当下个 Promise resolved, 返回上一个 Promise。
const runPromisesInSeries = ps => ps.reduce((p, next) => p.then(next), Promise.resolve());
使用方法:
const delay = time => new Promise(resolve => {
console.log(time);
setTimeout(resolve, time);
});
const promiseSeries = [() => delay(1000), () => delay(2000)];
runPromisesInSeries(promiseSeries);
sleep
简单来说,就是让函数等若干秒,然后再执行下一步。
const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));
使用方法:
async function sleepyWork() {
console.log("等一秒");
await sleep(1000);
console.log('一秒過去了');
}
isPromiseLike
我们可以简单容易地判断一个目标是否类似 Promise。 我们可以使用判断对象是否为 null,而且 typeof 的返回值是 object 或者 function,而且它拥有 .then 的属性。
const isPromiseLike = obj =>
obj !== null &&
(typeof obj === 'object' || typeof obj === 'function') &&
typeof obj.then === 'function';
使用方法:
const promise = new Promise(resolve => {
resolve();
});
isPromiseLike(promise); // true
isPromiseLike({
then: function() {
return '';
}
}); // true
isPromiseLike(null); // false
isPromiseLike({}); // false
值得注意的是:
这个方法只是一个判断类似 Promise,并非完全等于 Promise。
const fakePromise = {
then: () => {}
}
isPromiseLike(fakePromise); // true本文内容仅供个人学习/研究/参考使用,不构成任何决策建议或专业指导。分享/转载时请标明原文来源,同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦~感谢您的理解与支持!