浅解Promise

对于异步的解决方案

Promise

Promise是ES6新增的内置对象,一般使用Promise构造函数建立,Promise实例,解决异步问题。promise

1.Promise构造函数必须接收一个函数做为参数,我将其称为executor函数,executor函数也能够接收两个参数,resolve和reject,它们是两个函数由ECMAScript运行环境提供,无需本身部署。异步

//执行Promise函数,它返回一个promise实例对象
let promise=new Promise ((resolve,reject)=>{  
    console.log(1);
});

当咱们使用new建立一个构建一个Promise实例后,Promise实例内部的两个属性须要理解。函数

让咱们输出上方的promise实例spa

[[PromiseStatus]]: "pending"
[[PromiseValue]]: undefined

[[PromiseStatus]]:保存当前promise实例的状态,可能值pending,resolved,rejectedcode

[[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]]将发生改变。ip

如今,让咱们更加详细的去了解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对象将会有一个值,一样也是那个传入的表达式的值,不过咱们将这个值称为拒因或失败缘由

注意:resolvereject并不会终结 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(),不然你极可能不知道错误究竟是出在哪里

相关文章
相关标签/搜索