关于那些变化万千,开箱即用的 Promise 高度封装方法

时间: 2018-11-03阅读: 1205标签: 封装

前言

在日常开发中,我们少不了使用 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



站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/1254

关闭

JS封装getScroll函数 & 案例:固定导航栏

封装getScroll函数:1. 获取页面向上或者向左卷曲出去的距离的值,2. 浏览器的滚动事件。固定导航栏获取scrollTop值后判断高度大于导航栏的高,就设置样式固定住

浅谈Vue v-model实现原理,如何封装,以及封装方法

vue的v-model是一个十分强大的指令,它可以自动让input里的值自动和你设定的值进行绑定,它是如何实现的呢?其实v-model只不过是一个语法糖而已,真正的实现靠的还是:(1) v-bind:绑定响应式数据,(2) 触发 input 事件 并传递数据 (重点)

如何去设计一个组件封装_前端组件化设计思路

目前前端三大框架(Vue.js, Angular.js, React.js)都在引领着前端的组件化开发方向,组件化的前端开发方式的确为业务实现带来了前所未有的方便,其实组件化开发早已经具有(YUI),但如何封装一个优秀的组件,可能并不是每位前端开发者都能够做好的。

JQuery组件封装之return this.each(function () {});

这个时候就要说each了,还是之前的,倘若页面上有N个class为div的元素呢,即:this.length>1,这里each就必然要上场了,且每个对象都要返回,所以此段代码无疑是最方便的写法了

原生js实现ajax的封装

ajax 的全称是Asynchronous JavaScript and XML,简单理解下:ajax就是异步的js和服务端的数据;GET请求的数据会附在URL之后, 以 ? 分割URL和传输数据, 参数之间以 & 相连

使用Promise封装小程序wx.request

现在尝试把wx.request简单的封装了一下,调用一个request方法,每次请求自动携带header头信息,这样就省事多了,包含了常见的get post put delete 四种请求方法,支持Promise方式调用。

微信和支付宝中的一些常用方法封装

最近做了同一个样子的小程序的支付宝版本,现在如果想想是开发两次的话心里应该是很难受的。去年11月12月份左右开发了两个微信小程序是一个在超市买商品的,一个用户版本,一个商户版本的。我们团队看到了uniapp这个东西

fetch请求二次封装

JS 中使用 fetch 更加高效地进行网络请求,由于fetch 的请求方式同 $ajax 和 axios 都不太一样,为了方便请求过程,进行Fetch网络封装类:方式一传统使用回调函数的方式、方式二借助ES6中的promise的方式封装。

JS多态封装继承

JS是一种基于对象的语言,在JS中几乎所有的东西都可以看成是一个对象,但是JS中的对象模型和大多数面向对象语言的对象模型不太一样,因此理解JS中面向对象思想十分重要,接下来本篇文章将从多态、封装、继承

通过2行js代码实现DOM属性的封装以及交换两个变量的值

JavaScript两行代码实现DOM属性的封装以及交换两个变量的值。编程的时候不要忘记思考,否则你就只是一个完成工作的机器。所以,如果你现在的工作只是让你疯狂做业务而不给你思考和学习的时间,别犹豫,换一个。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!