2021.8.3 部分手写整合2.0

ES5 => Promise

Promise

//Promise/A+ Promise status
const STATUS = {
    PENDING: 'pending',
  FULFILLED: 'fulfilled',
  REJECTED: 'rejected'
}
class MyPromise{
    //constructor receive a cb    
    constructor(excutor){
      this._status = STATUS.PENDING //Promise initalValue
    this._value = undefined //then cb
    this._resolveQueue = [] // resolve Trigger
    this._rejectQueue = [] // reject Trigger
  }
  // arrow function bind 'this' 
  const resolve = value => {
      const run = () => {
        // Promise/A+
      if(this._status = STATUS.PENDING){
          this._status = STATUS.FULFILLED
        this._value = value  // for then cb
        // resolve cb
        while(this._resolveQueue.length){
            const cb = this._resolveQueue.shift()
          cb(value)
        }
      }
    }
    //把resolve执行回调的操作封装成一个函数,放进setTimeout里,以实现promise异步调用的特性（规范上是微任务，这里是宏任务）
    setTimeout(run)
  }
  // same as resolve 
  const reject = value => {
      const run = () => {
        if(this._status === STATUS.PENDING){
          this._status = STATUS.REJECTED
        this._value = value 
        while(this._rejectQueue.length){
            const cb = this._rejectQueue.shift()
          cb(value)
        }
      }
    }
    setTimeout(run)
   }
  excutor(resolve,reject)
}

Promise => then

//then in class
function then(onFulfilled,onRejected){re
    //Promise A+ 
  typeof onFulfilled !== 'function' ? onFulfilled = value => value : null
  typeof onRejected !== 'function' ? onRejected = error => error : null
  //then return Promise Object
  return new MyPromise((resolve,reject) => {
      const resolveFn = value => {
        try{
          const x = onFulfilled(value)
        // 分类讨论返回值,如果是Promise,那么等待Promise状态变更,否则直接resolve
        x instanceof MyPromise ? x.then(resolve,reject) : resolve(x)
      }catch(e){
          reject(e)
      }
    }
  })
}
const rejectFn = error => {
      try {
        const x = onRejected(error)
        x instanceof MyPromise ? x.then(resolve, reject) : resolve(x)
      } catch (error) {
        reject(error)
      }
    }
    switch (this._status) {
      case STATUS.PENDING:
        this._resolveQueue.push(resolveFn)
        this._rejectQueue.push(rejectFn)
        break;
      case STATUS.FULFILLED:
        resolveFn(this._value)
        break;
      case STATUS.REJECTED:
        rejectFn(this._value)
        break;
    }
 })
 }
 catch (rejectFn) {
  return this.then(undefined, rejectFn)
}

Promise finally

// promise.finally方法
finally(callback) {
  return this.then(value => MyPromise.resolve(callback()).then(() => value), error => {
    MyPromise.resolve(callback()).then(() => error)
  })
}

Promise static resolve

 // 静态resolve方法
 static resolve(value) {
      return value instanceof MyPromise ? value : new MyPromise(resolve => resolve(value))
  }

Promise static reject

// 静态reject方法
 static reject(error) {
   return new MyPromise((resolve, reject) => reject(error))
 }

Promise static all

// 静态all方法
 static all(promiseArr) {
      let count = 0
      let result = []
      return new MyPromise((resolve, reject) =>       {
        if (!promiseArr.length) {
          return resolve(result)
        }
        promiseArr.forEach((p, i) => {
          MyPromise.resolve(p).then(value => {
            count++
            result[i] = value
            if (count === promiseArr.length) {
              resolve(result)
            }
          }, error => {
            reject(error)
          })
        })
      })
    }

Promise static race

 // 静态race方法
 static race(promiseArr) {
      return new MyPromise((resolve, reject) => {
        promiseArr.forEach(p => {
          MyPromise.resolve(p).then(value => {
            resolve(value)
          }, error => {
            reject(error)
          })
        })
      })
    }
}

Ajax

Version 1.0

let xhr = new XMLHttpRequest() // 实例化
xhr.open('get','www.xxx.com')
xhr.onreadystateChange = () => {
    if(xhr.readyState === 4){
      if(xhr.status >= 200 && xhr.status < 300){
        let string = request.responseText
      let object = JSON.parse(string)
    }
  }
}
request.send()

Promise

function ajax(url) {
  const p = new Promise((resolve, reject) => {
    let xhr = new XMLHttpRequest()
    xhr.open('get', url)
    xhr.onreadystatechange = () => {
      if (xhr.readyState == 4) {
        if (xhr.status >= 200 && xhr.status <= 300) {
          resolve(JSON.parse(xhr.responseText))
        } else {
          reject('请求出错')
        }
      }
    }
    xhr.send()  //发送http请求
  })
  return p
}
let url = '/data.json'
ajax(url).then(res => console.log(res)).catch(reason => console.log(reason))