微信号:JavaScriptcn

介绍:面向JavaScript爱好人员提供:前端最新资讯、原创内容、JavaScript、HTML5、Ajax、jQuery、Node.js等一系列教程和经验分享.

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

2018-10-20 08:35 JavaScript

前言

在日常開發中,我們少不了使用 Promise,而透過封裝抽象方法,可以避免造輪子,寫出更加優雅的代碼。例如:將任意函數,化為具有異步能力的函數、改裝成具有並發上千萬請求的函數、使用 Web Worker 來使用不同線程、暫停若干秒再繼續。這裡就讓我們一起來動手封裝這些方法吧。

promisify

無論什麼函數,我們也可以將它化為異步函數。

這裡使用 currying 來返回一個函數,再返回一個 Promise 來調用原本的函數。

而且,可以用 ...rest 來傳遞所有參數,而不是 arguments

 
           
  1. const promisify = func => (...args) =>

  2.  new Promise((resolve, reject) =>

  3.    func(...args, (err, result) => (err ? reject(err) : resolve(result)))

  4.  );

使用方法

 
           
  1. const delay = promisify((d, cb) => setTimeout(cb, d));

  2. delay(2000)

  3.    .then(() => console.log('Hello World!'));

值得一提的是,如果你的 Node.js 版本為 8 以上,你可以使用 util.promisify

 
           
  1. const util = require('util');

  2. const fs = require('fs');

  3. const stat = util.promisify(fs.stat);

  4. stat('.').then((stats) => {

  5.  // 做你要做的事情

  6. }).catch((error) => {

  7.  // 處理錯誤

  8. });

你也可以使用 async/await 版本:

 
           
  1. const util = require('util');

  2. const fs = require('fs');

  3. const stat = util.promisify(fs.stat);

  4. async function callStat() {

  5.  const stats = await stat('.');

  6.  console.log(`This directory is owned by ${stats.uid}`);

  7. }

runAsync

使用 Web Worker 來在獨立線程調用函數,避免阻塞 UI 交互。

我們首先會使用 Blob 對象鏈接來創建一個 Worker,裡面的內容是純字符串的函數。

然後,馬上使用這個 worker,並返回一個 Promise

監聽 onmessage 及 onerror 事件,然後處理返回的 data。

代碼片段:

 
           
  1. const runAsync = fn => {

  2.  const worker = new Worker(

  3.    URL.createObjectURL(new Blob([`postMessage((${fn})());`]), {

  4.      type: 'application/javascript; charset=utf-8'

  5.    })

  6.  );

  7.  return new Promise((res, rej) => {

  8.    worker.onmessage = ({ data }) => {

  9.      res(data), worker.terminate();

  10.    };

  11.    worker.onerror = err => {

  12.      rej(err), worker.terminate();

  13.    };

  14.  });

  15. };

使用例子:

 
           
  1. const longRunningFunction = () => {

  2.  let result = 0;

  3.  for (let i = 0; i < 1000; i++) {

  4.    for (let j = 0; j < 700; j++) {

  5.      for (let k = 0; k < 300; k++) {

  6.        result = result + i + j + k;

  7.      }

  8.    }

  9.  }

  10.  return result;

  11. };

  12. runAsync(longRunningFunction).then(console.log); // 209685000000

  13. runAsync(() => 10 ** 3).then(console.log); // 1000

值得注意的是,由於函數運行的環境不同,所有變量和函數都需要在裡面定義。

使用外部變量的話,會出現問題:

 
           
  1. let outsideVariable = 50;

  2. runAsync(() => typeof outsideVariable).then(console.log); // 'undefined'

同時執行 Promise

如果想要一次性地幾千個請求的話,使用 Promise.all() 方法就可以達到並發的效果了。

使用方法

 
           
  1. const test = time => new Promise(resolve => {

  2.    setTimeout(() => resolve(time), time);

  3. });

  4. const temp = [test(1000), test(2000), test(3000)];

  5. Promise.all(temp).then(console.log); // [1000, 2000, 3000]

runPromisesInSeries

如果你想要一個個串聯,運行一系列的 Promise的話,可以使用 Array.prototype.reduce() 來製造一個 Promise 的鏈。當下個 Promise resolved, 返回上一個 Promise。

 
           
  1. const runPromisesInSeries = ps => ps.reduce((p, next) => p.then(next), Promise.resolve());

使用方法

 
           
  1. const delay = time => new Promise(resolve => {

  2.    console.log(time);

  3.    setTimeout(resolve, time);

  4. });

  5. const promiseSeries = [() => delay(1000), () => delay(2000)];

  6. runPromisesInSeries(promiseSeries);

sleep

簡單來說,就是讓函數等若干秒,然後再執行下一步。

 
           
  1. const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));

使用方法

 
           
  1. async function sleepyWork() {

  2.  console.log("等一秒");

  3.  await sleep(1000);

  4.  console.log('一秒過去了');

  5. }

isPromiseLike

我們可以簡單容易地判斷一個目標是否類似 Promise

我們可以使用判斷對象是否為 null,而且 typeof 的返回值是 object 或者 function,而且它擁有 .then 的屬性。

 
           
  1. const isPromiseLike = obj =>

  2.  obj !== null &&

  3.  (typeof obj === 'object' || typeof obj === 'function') &&

  4.  typeof obj.then === 'function';

使用方法

 
           
  1. const promise = new Promise(resolve => {

  2.  resolve();

  3. });

  4. isPromiseLike(promise); // true

  5. isPromiseLike({

  6.  then: function() {

  7.    return '';

  8.  }

  9. }); // true

  10. isPromiseLike(null); // false

  11. isPromiseLike({}); // false

值得注意的是:

這個方法只是一個判斷類似 Promise,並非完全等於 Promise

 
           
  1. const fakePromise = {

  2.    then: () => {}

  3. }

  4. isPromiseLike(fakePromise); // true

One more thing

上面提到的方法,都是從 30-seconds-of-code ,裡面提到很多可以在三十秒內閱讀,開箱即用的方法。

如果有時間的話,可以研讀一下裡面的代碼。

參考資料

  1. 30-seconds-of-code

  2. Promise.all() - MDN web docs

END

作者:calpa
https://calpa.me/2018/10/15/awesome-promise-methods/

 
JavaScript 更多文章 Flexbox 布局的最简单表单 写了8年的代码,做过的项目都下线了,程序员的意义在哪里! 近一年,你给自己的成长速度打几分? 实现高并发更轻松!这个编程语言竟然超过了Java... 一线大厂青睐的前端人,90%满足这3个条件
猜您喜欢 React-Native痛点解析之开发环境搭建及扩展 视频流技术为手机远程租用带来全新体验 2017 新年快乐! 趣图:当黑客拿到 Root 权限之后 论数据库容器化的目标和价值