注册登录

BAT前端经典面试问题 es6之promise原理，promise应用场景

九七分享吧（阿广） 22-03-20 322阅读 0评论

温馨提示：这篇文章已超过762天没有更新，请注意相关的内容是否还可用！

2022-03-20 12:25·小焱2018

promise

BAT前端经典面试问题 es6之promise原理，promise应用场景 第1张

一、 promise应用场景

1 解决回调地狱

比如我们经常可能需要异步请求一个数据之后作为下一个异步操作的入参

getData(function(a){

getMoreData(a, function(b){

getMoreData(b, function(c){

getMoreData(c, function(d){

getMoreData(d, function(e){

});

});

});

});

});

BAT前端经典面试问题 es6之promise原理，promise应用场景 第2张

getData(function(a){ getMoreData(a, function(b){

上面代码过于复杂 ，阅读起来也比较不方便：

如果使用promise：

function getData() {
return new Promise(function (resolve, reject) {
resolve(1);
});
}
function getMoreData(arg) {
return new Promise(function (resolve, reject) {
resolve(arg + 10);
});
}
getData().then(function (a) {
console.log(a); // 1
return getMoreData(a);
}).then(function (b) {
console.log(b); // 11
})

再简洁点儿

// 两个数据都回来之后再进行操作
let fs = require('fs');
fs.readFile('./file1.txt', 'utf8', function (err, data) {
console.log(data);
})
fs.readFile('./file2.txt', 'utf8', function (err, data) {
console.log(data);
})

promise的实现方式：

let fs = require('fs');
function read(url){
return new Promise(function(resolve,reject){
fs.readFile(url,'utf8',function(err,data){
if(err)reject(err);
resolve(data);
})
})
}
Promise.all([read('file1.txt'),read('file2.txt')]).then(data=>{
console.log(data);
// data 返回 [file,file] 两个文件返回值组成的数组
},err=>{
console.log(err);
});

好开始上大餐：

BAT前端经典面试问题 es6之promise原理，promise应用场景 第3张

手写Promise

Promise 的声明

promise是一个类，用class来声明。

  • 由于new Promise((resolve, reject)=>{})，所以传入一个参数（函数），可以叫他executor，传入就执行。
  • executor里面有两个参数，一个叫resolve（成功），一个叫reject（失败）。
  • 由于resolve和reject可执行，所以都是函数，我们用let声明。
class Promise{
// 构造器
constructor(executor){
// 成功
let resolve = () => { };
// 失败
let reject = () => { };
// 立即执行
executor(resolve, reject);
}
}

其中Promise的规定是：

  • Promise存在三个状态（state）pending、fulfilled、rejected
  • pending（等待态）为初始态，并可以转化为fulfilled（成功态）和rejected（失败态）
  • 成功时，不可转为其他状态，且必须有一个不可改变的值（value）
  • 失败时，不可转为其他状态，且必须有一个不可改变的原因（reason）
  • new Promise((resolve, reject)=>{resolve(value)}) resolve为成功，接收参数value，状态改变为fulfilled，不可再次改变。
  • new Promise((resolve, reject)=>{reject(reason)}) reject为失败，接收参数reason，状态改变为rejected，不可再次改变
  • 若是executor函数报错 直接执行reject();

简单实现

function myPromise(asyncFun) {
this.status = "pending";
this.successHandle = null;
this.failHandle = null;
function resolve(data) {
this.status = "resolved";
if(this.successHandle) this.successHandle(data);
}
function reject(data) {
this.status = "rejected";
if(this.failHandle) this.failHandle(data);
}
asyncFun(resolve.bind(this),reject.bind(this))
}
myPromise.prototype.then = function(successHandle,failHandle) {
this.successHandle = successHandle;
this.failHandle = failHandle;
}
class myPromise {
constructor(asyncFun) {
this.status = "pending";
this.successHandle = null;
this.failHandle = null;
let resolve = (data) => {
this.status = "resolved";
if (this.successHandle) this.successHandle(data)
}
let reject = (data) => {
this.status = "rejected";
if (this.failHandle) this.failHandle(data)
}
asyncFun(resolve, reject)
}
then(successHandle, failHandle) {
this.successHandle = successHandle;
this.failHandle = failHandle;
}
}

好吧，我也觉的备注太少，而且还不太看的懂，那么重新来：

class Promise{
constructor(executor){
// 初始化state为等待态
this.state = 'pending';
// 成功的值
this.value = undefined;
// 失败的原因
this.reason = undefined;
let resolve = value => {
// state改变,resolve调用就会失败
if (this.state === 'pending') {
// resolve调用后，state转化为成功态
this.state = 'fulfilled';
// 储存成功的值
this.value = value;
}
};
let reject = reason => {
// state改变,reject调用就会失败
if (this.state === 'pending') {
// reject调用后，state转化为失败态
this.state = 'rejected';
// 储存失败的原因
this.reason = reason;
}
};
// 如果executor执行报错，直接执行reject
try{
executor(resolve, reject);
} catch (err) {
reject(err);
}
}
}

then方法

Promise有一个叫做then的方法，里面有两个参数：onFulfilled,onRejected,成功有成功的值，失败有失败的原因

  1. 当状态state为fulfilled，则执行onFulfilled，传入this.value。当状态state为rejected，则执行onRejected，传入this.reason
  2. onFulfilled,onRejected如果他们是函数，则必须分别在fulfilled，rejected后被调用，value或reason依次作为他们的第一个参数
class Promise{
constructor(executor){...}
// then 方法 有两个参数onFulfilled onRejected
then(onFulfilled,onRejected) {
// 状态为fulfilled，执行onFulfilled，传入成功的值
if (this.state === 'fulfilled') {
onFulfilled(this.value);
};
// 状态为rejected，执行onRejected，传入失败的原因
if (this.state === 'rejected') {
onRejected(this.reason);
};
}
}

解决异步实现

现在基本可以实现简单的同步代码，但是当resolve在setTomeout内执行，then时state还是pending等待状态 我们就需要在then调用的时候，将成功和失败存到各自的数组，一旦reject或者resolve，就调用它们

由于一个promise可以有多个then，所以存在同一个数组内。

// 多个then的情况
let p = new Promise();
p.then();
p.then();

成功或者失败时，forEach调用它们

class Promise{
constructor(executor){
this.state = 'pending';
this.value = undefined;
this.reason = undefined;
// 成功存放的数组
this.onResolvedCallbacks = [];
// 失败存放法数组
this.onRejectedCallbacks = [];
let resolve = value => {
if (this.state === 'pending') {
this.state = 'fulfilled';
this.value = value;
// 一旦resolve执行，调用成功数组的函数
this.onResolvedCallbacks.forEach(fn=>fn());
}
};
let reject = reason => {
if (this.state === 'pending') {
this.state = 'rejected';
this.reason = reason;
// 一旦reject执行，调用失败数组的函数
this.onRejectedCallbacks.forEach(fn=>fn());
}
};
try{
executor(resolve, reject);
} catch (err) {
reject(err);
}
}
then(onFulfilled,onRejected) {
if (this.state === 'fulfilled') {
onFulfilled(this.value);
};
if (this.state === 'rejected') {
onRejected(this.reason);
};
// 当状态state为pending时
if (this.state === 'pending') {
// onFulfilled传入到成功数组
this.onResolvedCallbacks.push(()=>{
onFulfilled(this.value);
})
// onRejected传入到失败数组
this.onRejectedCallbacks.push(()=>{
onRejected(this.reason);
})
}
}
}

解决链式调用

我门常常用到new Promise().then().then(),这就是链式调用，用来解决回调地狱

  1. 为了达成链式，我们默认在第一个then里返回一个promise。在then里面返回一个新的promise,称为promise2：promise2 = new Promise((resolve, reject)=>{})
  • 将这个promise2返回的值传递到下一个then中
  • 如果返回一个普通的值，则将普通的值传递给下一个then中
  1. 当我们在第一个then中return了一个参数（参数未知，需判断）。这个return出来的新的promise就是onFulfilled()或onRejected()的值

定onFulfilled()或onRejected()的值，即第一个then返回的值，叫做x，判断x的函数叫做resolvePromise

  • 首先，要看x是不是promise。
  • 如果是promise，则取它的结果，作为新的promise2成功的结果
  • 如果是普通值，直接作为promise2成功的结果
  • 所以要比较x和promise2
  • resolvePromise的参数有promise2（默认返回的promise）、x（我们自己return的对象）、resolve、reject
  • resolve和reject是promise2的
class Promise{
constructor(executor){
this.state = 'pending';
this.value = undefined;
this.reason = undefined;
this.onResolvedCallbacks = [];
this.onRejectedCallbacks = [];
let resolve = value => {
if (this.state === 'pending') {
this.state = 'fulfilled';
this.value = value;
this.onResolvedCallbacks.forEach(fn=>fn());
}
};
let reject = reason => {
if (this.state === 'pending') {
this.state = 'rejected';
this.reason = reason;
this.onRejectedCallbacks.forEach(fn=>fn());
}
};
try{
executor(resolve, reject);
} catch (err) {
reject(err);
}
}
then(onFulfilled,onRejected) {
// 声明返回的promise2
let promise2 = new Promise((resolve, reject)=>{
if (this.state === 'fulfilled') {
let x = onFulfilled(this.value);
// resolvePromise函数，处理自己return的promise和默认的promise2的关系
resolvePromise(promise2, x, resolve, reject);
};
if (this.state === 'rejected') {
let x = onRejected(this.reason);
resolvePromise(promise2, x, resolve, reject);
};
if (this.state === 'pending') {
this.onResolvedCallbacks.push(()=>{
let x = onFulfilled(this.value);
resolvePromise(promise2, x, resolve, reject);
})
this.onRejectedCallbacks.push(()=>{
let x = onRejected(this.reason);
resolvePromise(promise2, x, resolve, reject);
})
}
});
// 返回promise，完成链式
return promise2;
}
}

完成resolvePromise函数

不同的promise代码互相套用，叫做resolvePromise

  • 如果 x === promise2，则是会造成循环引用，自己等待自己完成，则报“循环引用”错误
let p = new Promise(resolve => {
resolve(0);
});
var p2 = p.then(data => {
// 循环引用，自己等待自己完成，一辈子完不成
return p2;
})

1、判断x

  • Otherwise, if x is an object or function,Let then be x.then
  • x 不能是null
  • x 是普通值 直接resolve(x)
  • x 是对象或者函数（包括promise），let then = x.then 2、当x是对象或者函数（默认promise）
  • 声明了then
  • 如果取then报错，则走reject()
  • 如果then是个函数，则用call执行then，第一个参数是this，后面是成功的回调和失败的回调
  • 如果成功的回调还是pormise，就递归继续解析 3、成功和失败只能调用一个 所以设定一个called来防止多次调用
function resolvePromise(promise2, x, resolve, reject){
// 循环引用报错
if(x === promise2){
// reject报错
return reject(new TypeError('Chaining cycle detected for promise'));
}
// 防止多次调用
let called;
// x不是null 且x是对象或者函数
if (x != null && (typeof x === 'object' || typeof x === 'function')) {
try {
// A+规定，声明then = x的then方法
let then = x.then;
// 如果then是函数，就默认是promise了
if (typeof then === 'function') {
// 就让then执行 第一个参数是this 后面是成功的回调 和 失败的回调
then.call(x, y => {
// 成功和失败只能调用一个
if (called) return;
called = true;
// resolve的结果依旧是promise 那就继续解析
resolvePromise(promise2, y, resolve, reject);
}, err => {
// 成功和失败只能调用一个
if (called) return;
called = true;
reject(err);// 失败了就失败了
})
} else {
resolve(x); // 直接成功即可
}
} catch (e) {
// 也属于失败
if (called) return;
called = true;
// 取then出错了那就不要在继续执行了
reject(e);
}
} else {
resolve(x);
}
}

解决其他问题

  1. onRejected都是可选参数，如果他们不是函数，必须被忽略
  • onFulfilled返回一个普通的值，成功时直接等于 value => value
  • onRejected返回一个普通的值，失败时如果直接等于 value => value，则会跑到下一个then中的onFulfilled中，所以直接扔出一个错误reason => throw err
  1. onFulfilled或onRejected不能同步被调用，必须异步调用。我们就用setTimeout解决异步问题
  • 如果onFulfilled或onRejected报错，则直接返回reject()
class Promise{
constructor(executor){
this.state = 'pending';
this.value = undefined;
this.reason = undefined;
this.onResolvedCallbacks = [];
this.onRejectedCallbacks = [];
let resolve = value => {
if (this.state === 'pending') {
this.state = 'fulfilled';
this.value = value;
this.onResolvedCallbacks.forEach(fn=>fn());
}
};
let reject = reason => {
if (this.state === 'pending') {
this.state = 'rejected';
this.reason = reason;
this.onRejectedCallbacks.forEach(fn=>fn());
}
};
try{
executor(resolve, reject);
} catch (err) {
reject(err);
}
}
then(onFulfilled,onRejected) {
// onFulfilled如果不是函数，就忽略onFulfilled，直接返回value
onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : value => value;
// onRejected如果不是函数，就忽略onRejected，直接扔出错误
onRejected = typeof onRejected === 'function' ? onRejected : err => { throw err };
let promise2 = new Promise((resolve, reject) => {
if (this.state === 'fulfilled') {
// 异步
setTimeout(() => {
try {
let x = onFulfilled(this.value);
resolvePromise(promise2, x, resolve, reject);
} catch (e) {
reject(e);
}
}, 0);
};
if (this.state === 'rejected') {
// 异步
setTimeout(() => {
// 如果报错
try {
let x = onRejected(this.reason);
resolvePromise(promise2, x, resolve, reject);
} catch (e) {
reject(e);
}
}, 0);
};
if (this.state === 'pending') {
this.onResolvedCallbacks.push(() => {
// 异步
setTimeout(() => {
try {
let x = onFulfilled(this.value);
resolvePromise(promise2, x, resolve, reject);
} catch (e) {
reject(e);
}
}, 0);
});
this.onRejectedCallbacks.push(() => {
// 异步
setTimeout(() => {
try {
let x = onRejected(this.reason);
resolvePromise(promise2, x, resolve, reject);
} catch (e) {
reject(e);
}
}, 0)
});
};
});
// 返回promise，完成链式
return promise2;
}
}

九七分享吧所有文章来源于网络收集整理，如有侵权请联系QQ2387153712删除，如果这篇文章对你有帮助或者还不错的请给小编点个小赞(◠‿◠)，小编每天整理文章不容易(ಥ_ಥ)！！！

文章版权声明：除非注明，否则均为九七分享吧原创文章，转载或复制请以超链接形式并注明出处。

相关阅读

苹果 iOS/iPadOS 15.4.1 正式版发布

哎呦，被盗哦！周杰伦无聊猿NFT疑被钓鱼，价值超300万

“蔚小理”一季度成绩单：小鹏理想均跨过三万辆门槛，蔚来垫底

最完整的人类基因组序列，今天凌晨公布了！

手机行业不景气了？国产厂商大砍单：1.7亿订单取消

快手或将受益于互联网监管

我国实现首例V频段低轨卫星测控

北京外卖封签上线首日调查：1个封签约2分钱，已大面积推广

iPhone更换微信图标教程，安卓：不就是换个主题？

豆瓣关闭私密小组，壮士断腕为时未晚

台积电将5nm产量提高到15万片/月

京东增持京东物流 为了挽救股价还是应对激烈竞争？

发表评论

表情：
评论列表 （暂无评论，322人围观）

还没有评论，来说两句吧...

取消
微信二维码
微信二维码
支付宝二维码