手写promise
2022-08-07 本文已影响0人
萘小蒽
虽然一直在用这个api
且之前也有做过promise的功课,
但是面试让我手写实现promise
可能面试鸡冻了,就这一个问题面试评级降了 少了4000大洋啊 = = ....
不服气就手写各种了
网上找到的promise大体状态的改变,函数的调用都OK。
拆解
1、promise传入function生成实例
let myPromise = function (resolver) {
let _this = this;
if (resolver && typeof resolver !== 'function') {
throw new Error(`myPromise resolver ${resolver} is not a function at new myPromise`);
}
}
2、promise实例生成后,有三种状态、两个结果。
有三个状态
初始状态pending
终态1:pending reovle=> fulfilled
终态2:pending reject=> rejected
let FULFILLED = 'fulfilled';
let PENDING = 'pending';
let REJECTED = 'rejected';
let myPromise = function (resolver) {
let _this = this;
if (resolver && typeof resolver !== 'function') {
throw new Error(`myPromise resolver ${resolver} is not a function at new myPromise`)
}
this.status = PENDING;
this.resolve = function (reove) {
if (_this.status === PENDING) {
_this.status = FULFILLED;
_this.err = '成功'
}
}
this.reject = function (reject) {
if (_this.status === PENDING) {
_this.status = REJECTED;
_this.err = '失败'
}
}
}
以下是老版原型写法:
const FULFILLED = 'fulfilled'; //成功
const REJECTDE = 'rejected'; //失败
const PENDING = 'pending'; //等待
const newPromise = function (executor) {
let _this = this;
if (typeof executor !== 'function') {
throw new Error(`${executor} is not a function`)
}
this.status = PENDING; // 状态
this.value = undefined;//成功原因
this.reason = undefined;//失败原因
function resolve(value) {
if (_this.status === PENDING) {
_this.status = FULFILLED;
_this.value = value;
}
}
function reject(reason) {
if (_this.status === PENDING) {
_this.satatus = REJECTDE;
_this.reason = reason;
}
}
executor(resolve,reject)
}
newPromise.prototype.then = function (onFulfilled, onReject) {
this.onFulfilled = onFulfilled;
let _this = this;
if (this.status === FULFILLED ) {
onFulfilled(this.value);
}
if (this.status === REJECTDE) {
onReject(this.reason) ;
}
}
完善一下promise的一些细节。
1、Promise实例的状态变为Resolved,就会触发then方法绑定的回调函数。
2、Promise的原型的一些方法 then catch支持链式调用。
const FULFILLED = 'fulfilled'; //成功
const REJECTDE = 'rejected'; //失败
const PENDING = 'pending'; //等待
const newPromise = function (executor) {
let _this = this;
if (typeof executor !== 'function') {
throw new Error(`${executor} is not a function`)
}
this.status = PENDING; // 状态
this.value = undefined;//成功原因
this.reason = undefined;//失败原因
function resolve(value) {
if (_this.status === PENDING) {
_this.status = FULFILLED;
_this.value = value;
_this.onFulfilled&&_this.onFulfilled(value);
return _this
}
}
function reject(reason) {
if (_this.status === PENDING) {
_this.satatus = REJECTDE;
_this.reason = reason;
_this.onReject&&_this.onReject(reason);
return _this
}
}
executor(resolve,reject)
}
newPromise.prototype.then = function (onFulfilled, onReject) {
if (onFulfilled&&typeof onFulfilled!== 'function') {
throw new Error(`${onFulfilled} is not a function`)
}
if (onReject&&typeof onFulfilled!== 'function') {
throw new Error(`${onReject} is not a function`)
}
this.onFulfilled = onFulfilled;
this.onReject = onReject;
if (this.status === FULFILLED ) {
onFulfilled(this.value);
this.onFulfilled = null;
}
if (this.status === REJECTDE) {
onReject(_this.reason) ;
this.onReject = null;
}
return this
}
var example = new newPromise((resolve)=>{
setTimeout(function(){resolve(1)},3000)
});
example.then(res=>{console.log(res)});