您的当前位置：首页正文

ES6中promiseA+ 规范和promise

来源：二三娱乐

promiseA+ 规范

一个开放标准，对于开发人员可以操作的JavaScript promise标准
promise是一个构造方法，实例化promise 时传入一个函数作为处理器。
- 处理器函数有两个参数resolve 和reject 分别将结果变为成功态和失败态
- promise对象执行成功了要有一个结果，通过resolve传递出去，失败的话失败原因通过reject传递出去
- promise 是一个有then方法的对象或者函数
- thenalbe 是一个有then方法的对象或者函数
- value 是promise状态成功的值，也就是resolve的参数，包括各种数据类型，也包括undefined thenable或者是promise
- reason 是promise状态失败时的值，也就是reject的参数，表示拒绝的原因
exception是一个使用throw抛出的异常值

pending
- 初始的状态，可以改变
- 一个promise在resolve和reject前都处于这个状态
- 可以通过resolve 变成fulfilled状态
- 可以通过reject 变成rejected状态
fulfilled
- 最终态，不可变
- 一个promise被resolve后会变成这个状态
- 必须拥有一个value值
rejected
- 最终态，不可变
- 一个promise被reject之后会变成这个状态
- 必须有一个reason

resolve()方法
resolve(value)

value能传入的值
1. 普通值
2. promise对象
3. thenable对象
实例

const promise = new Promise((resolve, reject) => {
    resolve([
        {name: 'macbook', price: 993, intro: 'asdjfl'},
        {name: 'iphone', price: 32, intro:'sldfk'}
    ])
})
promise.then(res => {
    console.log(res)
}).catch(err => {
    console.log("error")
})

const promise = new Promise((resolve, reject) => {
    resolve(new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve("hello javascript")
        },3000)
    }))
})
promise.then(res => {
    console.log(res)
}).catch(err => {
    console.log("error")
})

const promise = new Promise((resolve, reject) => {
    resolve({
        name: 'javascript',
        then: function(resolve) {
            resolve(112)
        }
    })
})
promise.then(res => {
    console.log(res) //112
}).catch(err => {
    console.log("error")
})

then方法

promise.then(onFulfilled, onRejected)
- onFulfilled 必须是参数类型，可以选择，如果不是函数，就应该被忽略
- onRejected 必须是函数类型，可以选择，如果不是函数，就应该被忽略
onFulfilled特征
- 在promise变成fulfilled的时候，onFulfilled会被调用
- 在promise变成fulfilled之前，不应该被淘汰
- 只能被调用一次
onRejected特征
- 在promise变成rejected之前，就应该调用onRejected，参数是reason
- 在promise变成rejected之前，不应该被调用
- 只能被调用一次

then方法可以被调用多次

promise状态变成fulfilled，所有的onFulfilled回调需要按照then的顺序执行，也就是按照注册顺序执行
promise状态变成rejected之后，所有的onRejected回调需要按照then的顺序执行，也就是按照注册表的顺序执行
then必须返回要给promise
promise支持链式调用，then方法返回的是一个新的promise，链式中的then是等待这个promise有决议之后执行的

代码示例

// 返回的是undefined
const newPromise = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve("why")
    }, 3000)
})
newPromise.then(res => {
    console.log("第一个promise的方法",res) // why
}).then(res => {
    console.log("第二个promise的方法", res); //undefined 这里调用的是newPromise.then，由于上面的then没有返回东西，默认返回undefnied
})

// 返回的是普通值
const newPromise = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve("why")
    }, 3000)
})
newPromise.then(res => {
    console.log("第一个promise的方法",res) //why
    return "bbb"
}).then(res => {
    console.log("第二个promise的方法", res); //bbb
})

//返回的是promise对象
const newPromise = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve("why")
    }, 3000)
})
const promise = new Promise((resolve, reject) => {
    resolve("why")
})
promise.then(res => {
    console.log("第一个promise的方法",res)
    return newPromise
}).then(res => {
    console.log("第二个promise的方法", res);
})

// 返回的是thenable
const newPromise = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve("why")
    }, 3000)
})
newPromise.then(res => {
    console.log("第一个promise的方法",res)
    return {
        then:function (resolve){
            resolve("thenable")
        }
    }
}).then(res => {
    console.log("第二个promise的方法", res);
})

catch() 方法

promise.reject()方法是返回一个带有拒绝原因的promise对象，也会返回一个新的promise
中断函数继续执行 1. return 2. throw new Error() 3. yield函数
示例

// catch返回新的promise
const promise = new Promise((resolve, reject) => {
    reject("error aaaa")
})
promise.catch(err => {
    console.log("then第一次回调", err)
}).then(res => {
    console.log("then第二次回调",res)
}).then(res => {
    console.log("then第三次回调",res)
})

const promise = new Promise((resolve,reject) => {
    resolve("bbbb")
})
promise.then(res => {
    console.log("then 第一次回调",res)
    throw new Error("第二次promise的异常error")
}).then(res => {
    console.log("then第二次回调",res)
}).then(res => {
    console.log("then第三次回调",res)
}).catch(err => {
    console.log("then第四次回调", err)
})
console.log("后续执行的代码")

finally 方法
promise对象无论变成fulfilled还是rejected状态，最终都会被执行的代码，finally是不接受参数的，前面无论是fulfill状态，还是reject状态，都会执行

const promise = new Promise((resolve, reject) => {
    reject("error aaaa")
})
promise.catch(err => {
    console.log("then第一次回调", err)
}).then(res => {
    console.log("then第二次回调",res)
}).then(res => {
    console.log("then第三次回调",res)
}).finally(()=> {
    console.log("finally action")
})

Executor
1. Executor 是在创建Promise时候需要传入的一个回调函数，这个回调函数会被立即执行，并且传入两个参数
2. 通过resolve，如果传入的不是一个promise ，可以兑现(fulfilled)promise的状态。之后去调reject的时候，无法改变promise的状态，故不会有任何相应
3. 通过reject，可以拒绝(rejected)promise的状态
resolve类方法
then,catch,finally 方法都属于promise的实例方法，都是存放在promise.prototype上的
- resolve参数的形态
  - 普通值或者队形
  - promise
  - thenable
- 实例
```
Promise.resolve("hello world").then(res => {
    console.log("then结果", res)
})
//等价于
new Promise((resolve) => {
    resolve("hello world")
})
```
reject类方法
类似于resolve方法，只是会讲promise对象的状态设置为reject状态。不论参数是什么形态，都会直接作为reject状态的参数传递到catch的
```
Promise.reject("hello world")
new Promise((resolve, reject) => reject("hello world"))
```

实例

const promise = new Promise((resolve, reject) => { // 1
    resolve() //2
    reject() //3
})
promise.then(value => {
    console.log("成功的回调")
}).catch(err => {
    console.log("失败的回调")
})
//补充 resolve() reject()只会被调用一次。

解释
promise的三种状态，1处是pending 初始状态，通过调用resolve()函数，将初始状态变成以对象状态。 2处是 fulfilled状态 fulfilled状态是最终态，不会改变，所以3处代码reject()不会执行

const promise = new Promise((resolve, reject) => {
    reject("failure")
})
promise.then(res => {
    console.log("成功的回调",res)
})
promise.catch(err => {
    console.log("失败的回调",err)
})
promise.catch(err => {
    console.log("失败的回调",err)
})
promise.catch(err => {
    console.log("失败的回调",err)
})

promise.then(res => {
    console.log("成功回调",res)
}, err => {
    console.log("失败回调",err)
})

all方法

将多个promise包裹在一起形成一个新的promise对象
新的promise的状态是有所有的promise共同决定的
- 当多有的promise状态变成fulfilled状态的时候，新的promise状态会变成fulfilled，并将所有的promise的返回值组成一个数组
- 当有一个promise状态变成reject的时候，新的promise状态变成reject，并会将第一个reject的返回值作为参数

代码

const p1 = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve("p1 resolve")
    }, 3000)
})
const p2 = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve("p2 resolve")
    }, 2000)
})
const p3 = new Promise((resolve, reject) => {
    setTimeout(()=> {
        resolve("p3 resolve")
    }, 5000)
})
Promise.all([p1, p2, p3]).then(res => {
    console.log("all promise res:", res)
}).catch(err => {
    console.log("all promise err", err)
}) //all promise res: (3) ['p1 resolve', 'p2 resolve', 'p3 resolve']

const p1 = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve("p1 resolve")
    }, 3000)
})
const p2 = new Promise((resolve, reject) => {
    reject("error")
})
const p3 = new Promise((resolve, reject) => {
    setTimeout(()=> {
        resolve("p3 resolve")
    }, 5000)
})
Promise.all([p1, p2, p3]).then(res => {
    console.log("all promise res:", res)
}).catch(err => {
    console.log("all promise err", err)
}) // all promise err error

allSettled方法

all方法的缺点：当其中有一个promise变成reject状态的时候，新的promise就会变成对应的reject状态
- 对于任然处于resolved的，以及正在处于pending状态的promise，是得不到对应的结果的
allSettled中，添加了新的api，promise.allSettled
- 该方法会让所有的promise都有结果，无论是fulfilled，还是rejected时，才会有最终的状态
- 并且这个promise的结果一定是fulfilled

代码

const p1 = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve("p1 resolve")
    }, 1000)
})
const p2 = new Promise((resolve, reject) => {
    // reject("error")
    setTimeout(() => {
        resolve("p2 resolve")
    }, 1000)
})
const p3 = new Promise((resolve, reject) => {
    setTimeout(()=> {
        resolve("p3 resolve")
    }, 1000)
})
Promise.allSettled([p1, p2, p3]).then(res => {
    console.log("all promise res:", res)
}).catch(err => {
    console.log("all promise err", err)
})
//all promise res: 
// (3) [{…}, {…}, {…}]
// 0
// : 
// {status: 'fulfilled', value: 'p1 resolve'}
// 1
// : 
// {status: 'fulfilled', value: 'p2 resolve'}
// 2
// : 
// {status: 'fulfilled', value: 'p3 resolve'}
// length
// : 
// 3

race 方法

promise.race只要有一个promise对象进入fulfilled或者rejected状态的话，就会进行后面的处理

代码

const p1 = new Promise((resolve, reject) => {
    setTimeout(() => {
        // resolve("p1 resolve"
        reject("p1 reject")
    }, 1000)
})
const p2 = new Promise((resolve, reject) => {
    // reject("error")
    setTimeout(() => {
        resolve("p2 resolve")
    }, 1000)
})
const p3 = new Promise((resolve, reject) => {
    setTimeout(()=> {
        resolve("p3 resolve")
    }, 1000)
})
// 会等到一个promise有结果，无论这个结果是fulfilled还是rejected
Promise.race([p1, p2, p3]).then(res => {
    console.log("race Promise", res)
}).catch(err => {
    console.log("race promise err",err)
}) //race promise err p1 reject

any方法

any方法如果得到要给fulfilled状态，才会决定新promise的状态
如果所有的promise都是reject的，也会等所有的promise都变成reject状态
如果所有的promise都是reject的，那么会报一个AggregateError的错误

代码

const p1 = new Promise((resolve, reject) => {
    setTimeout(() => {
        // resolve("p1 resolve"
        reject("p1 reject")
    }, 1000)
})
const p2 = new Promise((resolve, reject) => {
    // reject("error")
    setTimeout(() => {
        resolve("p2 resolve")
    }, 1000)
})
const p3 = new Promise((resolve, reject) => {
    setTimeout(()=> {
        resolve("p3 resolve")
    }, 1000)
})
Promise.any([p1, p2, p3]).then(res => {
    console.log("any promise res: ",res)
}) //any promise res:  p2 resolve

const p1 = new Promise((resolve, reject) => {
    setTimeout(() => {
        // resolve("p1 resolve"
        reject("p1 reject")
    }, 1000)
})
const p2 = new Promise((resolve, reject) => {
    // reject("error")
    setTimeout(() => {
        reject("p2 reject")
    }, 1000)
})
const p3 = new Promise((resolve, reject) => {
    setTimeout(()=> {
        reject("p3 reject")
    }, 1000)
})
Promise.any([p1, p2, p3]).then(res => {
    console.log("any promise res: ",res)
}) // AggregateError: All promises were rejected

因篇幅问题不能全部显示，请点此查看更多更全内容

查看全文

ES6中promiseA+ 规范 和promise

promiseA+ 规范

ES6中promiseA+ 规范和promise