前言
promise是前端同学最熟悉不过的概念了,几乎每一位都在面试场中经历过它,日常的开发工作中也在使用且仅仅在使用,很多人没有深究原理,因此我带大家彻底搞懂promise原理,实现自己的小突破。
写在前面
介绍
我们使用反向推理,因此要想实现promise,首先我们要熟练使用,在根据我们使用的功能,依次实现它。首先需要阅读下promise A+ 规范 promisesaplus.com/
简单介绍一下promise的功能:
- promise是es6的新特性,是一种异步解决方案,但同时会存在异步嵌套问题;
- 每个promise有三个状态: pending resolve reject; resolve标识变成成功态:fulfilled,reject标识变成失败态:rejected;抛出异常也会走向失败态(throw new Error("error message"));
- 每个promise都有then方法和catch方法;then方法传入两个参数:一个是成功的回调,一个是失败的回调
promise解决了什么问题呢?
如何解决异步并发问题?
- 回调函数
const fs = require('fs'); // 可以读取文件
interface IPerson {
age:number,
name:string,
[xxx: string]: any
}
function after(times: number,callback: Function){ // 高阶函数 可以暂存变量
let obj = {} as IPerson;
return function(key:string,val:number | string){
obj[key] = val;
--times == 0 && callback(obj);
}
}
let fn = after(2,(obj: any)=>{
console.log(obj);
})
fs.readFile('./age.txt','utf8',(err: any,data: number)=>{
fn('age',data);
});
//这里会出现不能读取文件的问题,那就通过path.resolve(__dirname, '')获得绝对路径,替换readFile路径就好了
fs.readFile('./name.txt','utf8',(err: any,data: string)=>{
fn('name',data);
});
- 发布订阅模式和观察者模式
juejin.cn/post/692021… command + F 检索一下
铺垫
特点: promise是基于回调形式的,所以要想搞懂原理,首先要清楚一些基本知识:回调函数、高阶函数、柯里化函数呀等, 下面用几个例子分别介绍一下。
切片编程
高阶函数定义: 参数是函数或者返回值是函数的函数是高阶函数,高阶函数最常见的应用模式就是切片编程,即不改变函数原有功能的基础上给函数增加新的功能。
// 切片编程
type Callback = () => void;
type ReturnFn = (...args: number[]) => void;
interface Function {
before(fn: Callback): ReturnFn
}
Function.prototype.before = function (fn) {
return (...args) => {
fn();
this(...args)
}
}
function core(a: number, b: number, c: number) {
console.log(a, b, c);
}
let HigherWithCore = core.before(() => {
console.log('before');
})
HigherWithCore(2, 5, 6)
柯里化函数
juejin.cn/post/691940…
为什么不使用tsc编译成js文件,不可能一个一个文件编译,因此用rollup打包工具
target: es5 目标语法是es5但是,如果代码中写了proxy,还是不会被编译,因为本身es5就没有
原理剖析
这里附上github地址,具体分析就是每一条的commit记录
我们自己实现的promise原理的特点: promise是内部的,我们现在只是模拟实现Promise,那我们模拟过程中注意以下几个点
- 既然promise能实例化,那么它是一个类
- 打包后bundle.js文件看到,module.exports = Promise 说明是node语法来导出的
- 虽然我们书写语法是es语法,但是是给node用的,所以需要在rollup.config.js配置文件中配置format: cjs,这样打包时就会遵循commonjs规范,编译成最终node需要的语法。
github.com/China-forre…
还在继续更新,有帮助的可以 一波!
后续附上:promise所有场景面试题,以此检验是否掌握。
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用?
- 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了?
- 找不到素材资源介绍文章里的示例图片?
- 模板不会安装或需要功能定制以及二次开发?
发表评论
还没有评论,快来抢沙发吧!