用法
在开始写之前我们首先得知道promise的用法,有哪些方法可以用
promise可以根据结果返回一个成功的承诺和失败的状态,我们可以根据promise返回的状态来执行具体的业务
用法:
const a = true
let p = new Promise((resolve, reject) => {
if (a) {
resolve('success')
} else {
reject('err')
}
})
console.log(p);
Promise有三种状态,当什么都不返回则是pending状态,并且[[PromiseResult]]值为undefined
执行了 resolve(‘success’)之后,状态为 “fulfilled” ,并且[[PromiseResult]]值为返回的val值
执行了 reject(‘err’)之后,状态为 “rejected” ,[[PromiseResult]]值为返回的val值
周边方法
p.then((res)=>{console.log(res)}) // 当Promise返回成功的状态之后,实例可以调用.then方法获取返回的值
Promise.all(); // 可以传入一个数组的promise,当所有promise都成功时则这个promise是成功,反之则失败状态
Promise.race(); // 和all的参数一样,一旦数组中某一个promise被处理或者被拒绝,这个返回的promise就同样会被处理或被拒绝
race的例子:
let p = new Promise((resolve, reject) => {
resolve('success1')
})
let p2 = new Promise((resolve, reject) => {
reject('err')
})
let p3 = new Promise((resolve, reject) => {
resolve('success3')
})
Promise.race([p, p2, p3]).then((res) => {
console.log(res);
})
执行结果只输出“success1”
手写promise
这里实现promise的几个步骤
- 创建一个promise类,并且在实例化之后可以返回状态和val值
- 实现.then()方法
- 解决一步问题
- 实现promise周边方法
- 实现.then()的链式调用
第一步 promise架子
创建类
class MyPromise {
constructor() {
this['[[PromiseResult]]'] = undefined
this['[[PromiseState]]'] = 'pending'
}
}
以上代码在调用之后就会实现和调用原生promise没有返回值的情况一样,pending状态
传入回调函数
下面是原生的promise,可以看到传入一个回调函数,并且还返回了成功的状态,修改了promise的状态
let p = new Promise((resolve, reject) => {
resolve('success1')
})
对照上面我们再完善一下自己的代码去修改状态
class MyPromise {
constructor(fn) { // 这里接收调用时候传入的函数
this['[[PromiseResult]]'] = undefined
this['[[PromiseState]]'] = 'pending'
fn(this._resolve.bind(this), this._reject.bind(this)) // 这里进行调用,并且传入resolve和reject这两个方法,方便调用,并且这里需要处理this的问题
}
_resolve(res) { // 这里的参数是在调用中成功之后传入要返回的值
// 在这里修改[[PromiseResult]]和[[PromiseState]]的值
this['[[PromiseResult]]'] = res
this['[[PromiseState]]'] = 'fulfilled'
}
_reject(err) {
this['[[PromiseResult]]'] = err
this['[[PromiseState]]'] = 'reject'
}
}
这里是调用中的对应关系图
到这里为止,我们的promise架子就搭建成功,状态都可以正确返回
下一篇实现.then()方法