对于异步的解决方案
Promise
Promise是ES6新增的内置对象,通常使用Promise构造函数创建,Promise实例,解决异步问题。
1.Promise构造函数必须
接收一个函数作为参数,我将其称为executor
函数,executor函数也可以接收两个参数,resolve和reject,它们是两个函数,由ECMAScript运行环境提供,无需自己部署。
//执行Promise函数,它返回一个promise实例对象
let promise=new Promise ((resolve,reject)=>{
console.log(1);
});
当我们使用new创建一个构建一个Promise实例后,Promise实例内部的两个属性需要理解。
让我们输出上方的promise实例
[[PromiseStatus]]: "pending"
[[PromiseValue]]: undefined
[[PromiseStatus]]
:保存当前promise实例的状态,可能值pending,resolved,rejected
[[PromiseValue]]
:在promise未完成状态时,其值为undefinde,当promise完成后,其值为异步数据,或者错误信息。当执行了resolve(),[[PromiseValue]]
的值就是resolve()传入 的表达式的值,通常就是是我们需要的值。当我们使用了reject(),这个值为reject()的传入值,通常这个值为错误提示
2.对于resolve和reject,它们的作用是判断对象的状态。并且它们调用时可以接收一个参数。
let promise=new Promise ((resolve,reject)=>{
console.log(1);
resolve('成功');
});
当调用了resolve或reject ,promise实例的[[PromiseStatus]]
将发生改变。
现在,让我们更加详细的去了解Promise
promise状态
一个Promise对象的当前状态必须
为一下三种状态的一种:Pending
(等待状态),Fulfilled
(执行状态),Rejected
(拒绝状态)
-
Pending
:处于Pending状态时,promise可以满足以下条件
可以由Pending转为Fulfilled或Rejected ,
-
Fulfilled
:处于Fulfilled状态时,promise满足以下条件
1.不可再变为其它状态。
2.必须有一个不可被改变的值。
-
Rejected
:
1.不可再变为其它状态。
2.必须有一个不可被改变的值。
如何理解Promise A + 规范中的这三个状态及其规则。
Promise对象的两个内部属性可以很好帮我们去解释理解。
[[PromiseStatus]]
,[[PromiseValue]]
现在,进行Promise第一步,新建一个Promise对象,对象两个内部属性被初始化
[[PromiseStatus]]
:Pending
[[PromiseValue]]
:undefined
此时是规范中的第一种状态,OK,根据规范的Pending状态的条件,我们可以去改变其状态。
executor
函数在Promise对象创建后立即执行
。
倘若我们在executor函数执行了resolve()函数,并且,将一个表达式(Expression)
作为其参数传入。此时内部属性值的变化
[[PromiseStatus]]
:resolved
[[PromiseValue]]
:<表达式的值>
此时,Promise对象的状态有Pending变为Fulfilled.通俗点说,就是由等待
变为成功
。根据Promise A+ 的Fulfilled状态的规范条件,此时,无论接下来在遇到什么情况,都不会去改变它的状态!
,并且Promise对象将会有一个值,Yes,这个值就是我们需要的值,准确的说,它就是那个传入的表达式的值,并且这个值通过resolve()函数存入了[[PromiseValue]]属性中。我们无法直接去使用它,而是通过then()去获取
让我们来看个例子
let p1 = new Promise((res,rej)=>{
res((() => {
return '成功了';
})())
})
console.log(p1);
//输出
[[PromiseStatus]]: "resolved"
[[PromiseValue]]: "成功了"
倘若我们在executor函数执行了reject()函数,并且,将一个表达式(Expression)
作为其参数传入。此时内部属性值的变化
let p2 = new Promise((res,rej)=>{
rej((() => {
return '失败了';
})())
})
console.log(p2);
// promise对象的两个属性
[[PromiseStatus]]: "rejected"
[[PromiseValue]]: "失败了"
此时,Promise对象的状态有Pending变为Fulfilled,由等待
变为失败
,根据Promise A+ 的Fulfilled状态的规范条件,此时,无论接下来在遇到什么情况,都不会去改变它的状态!并且Promise对象将会有一个值,同样也是那个传入的表达式的值,不过我们将这个值称为拒因或失败原因
。
注意:resolve
或reject
并不会终结 Promise 的executor函数的执行
我们已经在executor函数中执行了resolve或reject函数,状态发生改变,内部属性值也发生了改变
现在,该启动then()方法和 catch()方法了。
then()
它有两个函数作为参数,通常,我们只使用第一个函数来获取[[PromiseStatus]]
的值为"resolved"的对象的[[PromiseValue]]
值,回调函数接收一个参数,此参数就是[[PromiseValue]]值
let p1 = new Promise((res,rej)=>{
res((() => {
return '成功了';
})())
}).then(data=>{
console.log(data)
})
注意 : then() 方法产生一个微任务,其回调将会被置入上一个宏任务队列后。
cathc()
当[[PromiseStatus]]
为reject时,调用此方法。
它接收一个函数作为参数,此函数接收一个参数,该参数就是拒因
let p2 = new Promise((res,rej)=>{
rej((() => {
return '失败了';
})())
}).then(data=>{
console.log(data)
}).catch(error=>console.log(error))
现在大致了解了Promise是怎么回事了 Good!
还有注意 :无论如何,在使用Promise对象时,加上catch(),否则你很可能不知道错误到底是出在哪里
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。