then方法的形参特点
then方法可以接收两个参数,第一个是成功回调函数,第二个是失败回调函数
如果调用then方法的promise对象的状态是成功,则then方法调用第一个参数对应的回调函数
反之,调用第二个参数对应的回调函数
then方法的两个形参是可选的,即调用then方法时,两个参数可以传,可以不传。
如果第一个参数不传,then方法默认提供一个 v => { return v } 成功回调函数,表示当调用then的promise实例对象是成功状态时,then方法返回一个成功状态,且结果为调用then的promise对象的结果的新promise对象。不传第一个参数,整体起到一个成功结果透传的效果。
如果第二参数不传,then方法默认提供一个 r => { throw r }失败回调函数,表示当调用then的promise实例对象是失败状态时,then方法会返回一个失败状态的,且结果调用then方法的promise对象的结果的新的promise对象。不传第二个参数,整体起到一个异常穿透的效果。
then方法的返回值特点
then方法会返回一个新的promise对象,该promise对象的状态和结果由then方法调用的回调函数的结果决定。
如果回调函数的返回值是一个非Promise类型的值,则then方法返回的新Promise对象的状态是fulfilled,结果是回调函数的返回值。
如果回调函数的返回值是一个Promise类型的对象,则then方法返回的新Promise对象的状态是回调函数的返回值对应promise对象的状态,结果是回调函数的返回值对应promise对象的结果。
由于then方法返回值是一个新promise对象,所以Promise支持链式调用then方法。这是解决回调地狱的原理。
catch方法的特点
catch方法接收一个失败的回调函数作为参数
只有当调用catch方法的promise实例对象是一个失败状态时,才会触发catch方法形参传入的失败回调函数。
catch方法本质就是then(undefined,onRejected)
在Promise链式调用的最后调用catch方法可以起到捕获穿透到最后的异常的作用。
resolve,reject静态方法
用于快速生成Promise对象
其中resolve方法可以生成成功状态的,也可以生成失败状态的Promise对象
reject方法只能生成失败状态的Promise对象。
resolve方法接收一个任意类型的值,可以是非Promise值,也可以是Promise对象,其结果取决于传入的参数值。
reject方法接收一个任意类型的值,方法返回的失败状态的promise对象的结果就是传入的值。
all,race静态方法
all和race静态方法都返回一个Promise对象,都接收一个元素是Promise对象的数组
all方法表示:
1、当数组中所有的Promise对象都是成功状态时,才返回一个成功的Promise对象,且其结果是一个数组,数组元素是all方法形参数组的每个元素的结果。
2、只要数组中有一个Promise对象是失败状态的,就会返回一个失败的Promise对象,且其结果就是形参数组中第一个失败的Promise对象的结果。
race方法表示:
方法形参数组中第一个完成状态改变的Promise对象的状态和结果
就是方法返回值Promise对象的状态和结果
// 声明构造函数
function Promise(executor) {
this.PromiseState = ‘pending’;
this.PromiseResult = null;
this.callbacks = [];
const that = this;
function resolve(data) {
if (that.PromiseState !== ‘pending’) return
// 修改promise对象的状态
that.PromiseState = ‘fulfilled’;
// 修改promise对象的结果值
that.PromiseResult = data;
that.callbacks.forEach(item => {
setTimeout(()=>{
item.onResolved(data);
});
});
}
function reject(data) {
if (that.PromiseState !== ‘pending’) return
that.PromiseState = ‘rejected’;
that.PromiseResult = data;
that.callbacks.forEach(item => {
setTimeout(()=>{
item.onRejected(data);
});
});
}
try {
// executor函数同步调用的
executor(resolve, reject);
} catch (e) {
reject(e);
}
}
// 添加then方法
Promise.prototype.then = function (onResolved, onRejected) {
// 异常穿透原理
if (typeof onRejected !== ‘function’) {
onRejected = reason => {
throw reason;
}
}
if (typeof onResolved !== ‘function’) {
onResolved = value => value;
}
let that = this;
return new Promise((resolve, reject) => {
function callback(type) {
try {
let result = type(that.PromiseResult);
if (result instanceof Promise) {
result.then(value => {
resolve(value);
}, reason => {
reject(reason);
});
} else {
resolve(result);
}
} catch (e) {
reject(e);
}
}
if (this.PromiseState === ‘fulfilled’) {
setTimeout(()=>{
callback(onResolved);
});
}
if (this.PromiseState === ‘rejected’) {
setTimeout(()=>{
callback(onRejected);
});
}
// 当执行器函数封装的是异步操作时,resolve和reject函数执行会等待所有同步操作完成后执行,而then方法因为不知道PromiseState是成功还是失败,无法直接执行回调函数
// 则回调函数执行时机需要延迟到PromiseState改变后,即resolve或reject函数执行完后才能执行
// 通过将回调函数保存到promise对象的属性中,保证了resolve或reject函数执行时可以直接调用
if (this.PromiseState === ‘pending’) {
// 同一个promise对象可以指定多个回调函数,并且多个回调函数都可以被执行
this.callbacks.push({
onResolved: function () {
setTimeout(()=>{
callback(onResolved);
});
},
onRejected: function () {
setTimeout(()=>{
callback(onRejected);
});
}
});
}
});
}
Promise.prototype.catch = function (onRejected) {
this.then(undefined, onRejected);
小编13年上海交大毕业,曾经在小公司待过,也去过华为、OPPO等大厂,18年进入阿里一直到现在。
深知大多数初中级前端工程师,想要提升技能,往往是自己摸索成长或者是报班学习,但自己不成体系的自学效果低效又漫长,而且极易碰到天花板技术停滞不前!
因此收集整理了一份《2024年Web前端开发全套学习资料》送给大家,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友,同时减轻大家的负担。
由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频
如果你觉得这些内容对你有帮助,可以添加下面V无偿领取!(备注:前端)
最后
除了简历做到位,面试题也必不可少,整理了些题目,前面有117道汇总的面试到的题目,后面包括了HTML、CSS、JS、ES6、vue、微信小程序、项目类问题、笔试编程类题等专题。
)]
最后
除了简历做到位,面试题也必不可少,整理了些题目,前面有117道汇总的面试到的题目,后面包括了HTML、CSS、JS、ES6、vue、微信小程序、项目类问题、笔试编程类题等专题。