手写实现简版promise(一)

用法

在开始写之前我们首先得知道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的几个步骤

1. 创建一个promise类，并且在实例化之后可以返回状态和val值
2. 实现.then()方法
3. 解决一步问题
4. 实现promise周边方法
5. 实现.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()方法