前端实现一个异步的promise

本文链接：https://blog.csdn.net/mmzzll2019/article/details/117606780

本文介绍了如何实现一个基本的JavaScript Promise，包括分析Promise接口、类比高阶函数的实现方式，以及具体代码实现。作者重点实现了Promise的`then`和`catch`方法，并提供了在线测试案例。

摘要由CSDN通过智能技术生成

参考文档

面试经常被问道怎么实现Promise，下面我们来实现一个Promise。我在网上搜索了一堆实现方案，总感觉有些不符合我的期望，下面是我的一些参考的实现方案：
1. https://www.jianshu.com/p/43de678e918a
2. https://segmentfault.com/a/1190000016550260

MDN上的Promise文档：
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise

MDN上的Promise原理图
在这里我只实现了Promse的then，catch方法，其余的api如all, resolve,any,race等，感兴趣的小伙伴们可以去尝试去实现，这是我的项目代码：
https://codesandbox.io/s/youthful-paper-6vwfy?file=/src/myPromise.js
上面附带了测试案例，可以直接线上运行无需下载，大家有兴趣可以试一试：
https://codesandbox.io/s/youthful-paper-6vwfy?file=/src/TestMyPromise.js

分析

首先我们来定义一下Promise的接口有那些：

class MyPromise{
   
	/**
	* 动态生成的，根据then的回调函数生成，在构造函数中初始化，
	* 初始化的值为undefined
	* @param {any} value 可以是任何类型
	**/
	_onFullfilled(value){
   }

	/**
	* 动态生成的，根据then，catch的回调函数生成，
	* 在构造函数中初始化， 初始化的值为undefined
	* @param {any} err 可以是任何类型
	**/
	_onRejected(err){
   }
	/**
	* @param {Function} func类型是一个函数，形如： (resolve, reject) => {}。resovle和reject也
	* 是函数，形如： (result) => {}
	**/
	constructor(func){
   }
	
  	/**
	* @param {Function} onResolve 是一个形如(result) => {}的函数
	* @param {Function} onReject 是一个形如(result) => {}的函数
	* @return 返回一个新的MyPromise对象
	**/
	then(onResovle, onReject){
   }
	
  	/**
	* @param {Function} onReject 是一个形如(result) => {}的函数
	* @return 返回一个新的MyPromise对象
	**/	
	catch(onReject){
   }
	
	/**
	* constructor 中func的两个参数中resolve对应的实参，但是需要先调用bind绑定this
	* @param {Any} value 可以是任何类型
	**/
	_resolve(value){
   }
	/**
	**	constructor 中func的两个参数中reject对应的实参，但是需要先调用bind绑定this
	**  @param {Any} err 可以是任何类型
	**/
	_reject(err){
   }
}

高阶函数

在实现之前，我们先看看高阶函数：

// 我们希望有这样一系列函数，f1在接受到参数执行完后把结果传递到f2, f2执行完后把结果传递到f3, ...
// 依次类推，直到fn执行完后，返回最终结果。我们可以这样来定义一个高阶函数（为了把问题简单化，这里我使用的是单参数函数）：
const f = f1 => f2 => f3 => ... => fn => (params) => fn(...(f3(f2(f1(params)))))...)