关于promise
promise是es6引入的对象, 用于处理复杂的异步回调
基本使用
1
2
3
4
| const p=new Promise((resolve,reject)=>{
......
})
p.then((value)=>{}).catch((reason)=>{})
|
常用函数
then(method1,method2), 根据上一个promise的执行结果, 如果fulfilled,则执行第一个方法, 否则则执行第二个
catch: 一般在链式反应中, catch放在最低端.
resolve: 直接创建一个fulfilled状态的promise
reject: 创建一个rejected状态的promise
all: 接收一个promise数组, 如果所有promise执行的结果都fulfilled, 那么则返回一个fulfilled的promise, 这个promise的value值是所有promise的执行结果.
race: 返回的promise的值, 为第一个执行完成(无论是完成还是失败)的promise对象的值
四种返回值的情况
(1)当内部函数正常执行,没有返回值,则生成的promise对象为fulfilled状态.value为undefined
(2)当函数return了非promise的对象,也为fulfilled状态,这个对象即为value值
(3)当函数return了promise对象,则then生成的,就是这个promise对象,状态和value/reason都对的上 (重点)
(4)当我们手动抛出错误的时候,生成rejected状态,并且reason就是throw的数值
可能会问的面试题目
自定义实现
面试笔试常考的一个点就是promise的某些方法的实现, 或者是纯手动实现一个promise
需求分析
promise类, 内部需要配实现的方法为
构造器(需要传入参数为执行函数, 也就是(resolve, reject)=>{.....}), 执行参数的逻辑需要自行指定.
then函数, 参数为两个执行函数,分别对应成功和不成功两种情况
catch函数, 参数为一个执行函数, 对应失败的情况
all函数, 接收参数为一个数组, 返回的是一个value为所有promise的值的promise
race函数, 接收参数为一个数组,返回第一个完成的promise的执行情况
代码实现===> 这个建议最好背下来
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
| class Mypromise{
//构造器函数
constructor(executor){
this.state='pending'
this.value=''
this.reason='';
callbackFullfilled=[];
callbackRejected=[];
//两个参数函数
const resolve=(value)=>{
if(this.state=='pending'){
this.state='fullfilled';
this.value=value;
callbackFullfilled.forEach(callback=>callback())
}
}
const reject=(reason)=>{
if(this.state=='pending'){
this.state='rejected';
this.reason=reason;
callbackRejected.forEach(callback=>callback())
}
}
try{
executor(resolve, reject)
}catch(e){
reject(e);
}
}
//then函数
then(onFullfilled, onRejected){
return new Mypromise((resolve,reject)=>{
//创建两个执行逻辑
const handleFullfilled=()=>{
const result=onFullfilled(this.value)
resolve(result);
}
const handleRejected=()=>{
const result=onReject(this.value)
resolve(result);
}
//判断当前状态是执行什么逻辑
if(this.state=="fullfilled"){
handleFullfilled();
}else if (this.state=="rejected"){
handleRejected();
}else{
this.callbackFullfilled.push(onFullfilled);
this.callbackRejected.push(onRejected);
}
})
}
//catch函数
catch(onRejected){
return this.then(null,onRejected);
}
//resolve函数
static resolve(value){
return new Mypromise((resolve,reject)=>resolve(value))
}
//reject函数
static reject(reason){
return new Mypromise((resolve,reject)=>reject(reject))
}
//all函数
all(promises){
return new MyPromise((resolve,reject)=>{
let count=0;
let values=[];
promises.forEach((promise,index)=>{
Mypromise.resolve(promise).then((value)=>{
if(count==promises.length){
resolve(value)
}
}).catch(reject)
})
})
}
//race函数
race(promises){
return new MyPromise((resolve, reject)=>{
promises.forEach((promise)=>{
Mypromise.resolve(promise).then(resolve).catch(reject)
})
})
}
}
|
转载请注明来源，欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论，也可以邮件至 xranudvilas@gmail.com
