promise A+手写实现规范 通过promises-aplus-tests检测

44 阅读3分钟

resolvePromise(promise, y, resolve, reject);

}, err => {

if (called) return;

called = true;

reject(err);

})

} else {

// 第二次修改

if (called) return;

called = true;

resolve(x);

}

} catch (err) {

if (called) return;

called = true;

reject(err);

}

} else {

// 如果是个普通值直接返回该值

resolve(x);

}

}

class APromise {

constructor(fn) {

this.state = 'pending'; //状态,初始化state为pending

this.value = null; //成功结果,返回一般都是null

this.reason = null; //失败的原因,返回一般都是null

this.resolvedCb = []; // 成功执行函数队列

this.rejcetCb = []; // 失败执行函数队列

// success 成功

let resolve = value => {

if (this.state === 'pending') {

// state change

this.state = 'fulfilled';

// 储存成功的值

this.value = value;

// 一旦成功,调用函数队列

this.resolvedCb.forEach(fn => fn())

}

}

// faile

let reject = reason => {

if (this.state === 'pending') {

// state change

this.state = 'rejected';

// 储存失败信息

this.reason = reason;

// 一旦成功,调用函数队列

this.rejcetCb.forEach(fn => fn());

}

}

try {

fn(resolve, reject);

} catch (err) {

reject(err);

}

}

// 静态方法 仅供对象本身调用

static resolve(val) {

return new APromise((resolve, reject) => {

resolve(val);

})

}

static reject(val) {

return new APromise((resolve, reject) => {

reject(val);

})

}

// all 方法(获取所有的promise, 执行then, 把结果放在数组,一起返回)

static all(promises){

let result = [];

let num = 0 //用来记录,当数量等于传进来参数的数量时,执行成功的回调

return new APromise((resolve, reject) => {

promises.forEach((item,index)=>{

//这里需要判断,item是否返回返回一个promise对象,不是的话,给他赋值一个默认的resolve

item = typeof item === 'object' ? item : MyPromise.resolve(item)

item.then(res=>{

//这里需要用到index进行占位,

// 因为promise返回的result的顺序,跟传进来的参数的顺序有关

result[index] = res;

num++

if(promises.length === num){

resolve(result)

}

},rej=>{

reject(rej)

})

})

})

}

static race(promiseArr) {

return new APromise((resolve, reject) => {

for (let i = 0, length = promiseArr.length; i < length; i++) {

let promiseItem = typeof promiseArr[i] === 'object' ? promiseArr[i] : APromise.resolve(promiseArr[i]);

promiseItem.then(resolve, reject);

}

})

}

catch(onRejected) {

return this.then(null, onRejected);

}

then(onfulfilled, onRejected) {

// onfulfilled then方法成功回调

// onRejected then方法失败回调

// 如果onfulfilled不是函数,就用默认函数替代,以便达到值穿透

onfulfilled = typeof onfulfilled === 'function' ? onfulfilled : value => value;

// 如果onRejected不是函数,就用默认函数替代,以便达到值穿透

onRejected = typeof onRejected === 'function' ? onRejected : err => { throw err };

let promise2 = new APromise((resolve, reject) => {

//当状态是fulfilled时执行onFulfilled函数

if (this.state === 'fulfilled') {

// 异步实现

setTimeout(() => {

try {

// x 是执行成功回调的结果

let x = onfulfilled(this.value);

// 调用resolvePromise函数,根据x的值,来决定promise2的状态

resolvePromise(promise2, x, resolve, reject);

} catch (err) {

reject(err);

}

}, 0)

}

//当状态是fulfilled时执行onFulfilled函数

if (this.state === 'rejected') {

setTimeout(() => {

try {

let x = onRejected(this.reason);

resolvePromise(promise2, x, resolve, reject);

} catch (err) {

reject(err)

}

}, 0)

}

// 当状态为pending时, resolvedCb,rejcetCb 队列里面家函数

if (this.state === 'pending') {

this.resolvedCb.push(() => {

setTimeout(() => {

try {

let x = onfulfilled(this.value);

resolvePromise(promise2, x, resolve, reject);

} catch (err) {

reject(err)

}

}, 0)

})

this.rejcetCb.push(() => {

setTimeout(() => {

try {

let x = onRejected(this.reason);

resolvePromise(promise2, x, resolve, reject);

} catch (err) {

reject(err)

}

}, 0)

})

}

})

return promise2;

}

// 语法糖 promises-aplus-tests 检测工具

static deferred() {

let dfd = {};

dfd.promise = new APromise((resolve, reject) => {

dfd.resolve = resolve;

dfd.reject = reject;

})

文末

js前端的重头戏,值得花大部分时间学习。

JavaScript知识

推荐通过书籍学习,《 JavaScript 高级程序设计(第 4 版)》你值得拥有。整本书内容质量都很高,尤其是前十章语言基础部分,建议多读几遍。

前端电子书

另外,大推一个网上教程 现代 JavaScript 教程 ,文章深入浅出,很容易理解,上面的内容几乎都是重点,而且充分发挥了网上教程的时效性和资料链接。

学习资料在精不在多,二者结合,定能构建你的 JavaScript 知识体系。

面试本质也是考试,面试题就起到很好的考纲作用。想要取得优秀的面试成绩,刷面试题是必须的,除非你样样精通。

这是288页的前端面试题

288页面试题 开源分享:docs.qq.com/doc/DSmRnRG…