手写实现简版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
手写实现简版promise(一)_第1张图片
执行了 resolve(‘success’)之后,状态为 “fulfilled” ,并且[[PromiseResult]]值为返回的val值
手写实现简版promise(一)_第2张图片
执行了 reject(‘err’)之后,状态为 “rejected” ,[[PromiseResult]]值为返回的val值手写实现简版promise(一)_第3张图片

周边方法

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);
})

手写实现简版promise(一)_第4张图片
执行结果只输出“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返回pending状态

传入回调函数

下面是原生的promise,可以看到传入一个回调函数,并且还返回了成功的状态,修改了promise的状态

let p = new Promise((resolve, reject) => {
	resolve('success1')
})

手写实现简版promise(一)_第5张图片
对照上面我们再完善一下自己的代码去修改状态

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'
  }
}

自己的fulfilled状态
手写实现简版promise(一)_第6张图片
这里是调用中的对应关系图
手写实现简版promise(一)_第7张图片
到这里为止,我们的promise架子就搭建成功,状态都可以正确返回

下一篇实现.then()方法

你可能感兴趣的:(js基础,javascript)