Promise

一、Promise的来源

在前端开发中，我们时常会遇到一个省市区街道的这样一个联动的需求。当没有Promise的时候，大部分人应该都会这样写

run(0)
setTimeout(() => {
  run(1);
  setTimeOut(() => {
    run(2);
    setTimeout(() => {
     run(3);
    }, 1000)
  }, 1000)
}, 1000)

这样写就会有无限层的嵌套，所以Promise诞生了，如果使用Promise将会是这样的：

new Promise((resolve, reject) => {
  run(0);
}).then((res) => {
  run(1);
}).then((res) => {
  run(2);
}).then((res) => {
  run(3);
})

这样就很清晰，并且Promise的then会顺序执行，解决了回调地狱的问题。

二、Promise是什么

Promise:承诺，诺言

1.Promise是异步的

 2.Promise的状态：等待->成功/失败 状态不可逆转

举个例子

let isForget = true;
let getLV = new Promise((resolve, reject) => {
    if(isForget) {
      let lv = {
        color: '#fff'
      }
      resolve(lv)
    } else {
      reject('forget');
   }
})


let test = () => {
   getLV.then(fulfiled => {
     console.log(fulfiled )
   }).catch(rejected => {
     console.log(rejected )
   })
}

// 链式调用

let getKH = (lv) => {
  let msg = {
    lv,
    message: '消息'
  }
  return Promise.resolve(msg)
}

let test2 = () => {
  getLV
  .then(getKH)
  .then(res => {console.log('33', res)})
  .catch(rejected => {
     console.log(rejected )
   })
}

test2();

  三、Promise的运行顺序

const promise = new Promise((resolve, reject) => {
  console.log(1);
  resolve();
  console.log(2);
})

promise.then(() => {
  console.log(3);
})

console.log(4);

构造函数立即执行  .then异步执行

1243

再看看下面这个题

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
   console.log(1);
   resolve(2);
  }, 1000)
})

promise.then((res) => {
  console.log(res);
})

promise.then((res) => {
  console.log(res);
})

setTimeout是宏任务 会在任务队列里等待微任务执行完毕后再执行

构造函数只执行一次 。then可多次执行

122

四、手写Promise

1.定义Promise

function myPromise (excutor) {
 let self = this;
 self.value = ''; //成功的结果
 self.reason = ''; //失败的原因
 self.status = 'pending'; // 状态
 self.onFulfilledCallback = [];
 self.onRejectedCallback= [];
 function resolve(value){
  //4.状态处理
  if(self.status === 'pending) {
   self.valve = value;
   self.status = 'fullfiled'
   // 7 状态改变 将存储的方法取出
   self.onFulfilledCallback.forEach(item => item(value))
  }
 }
 function reject(reason){
 if(self.status === 'pending) {
   self.reason = reason;
   self.status = 'rejected'
   // 7 状态改变 将存储的方法取出
   self.onRejectedCallback.forEach(item => item(reason))
  }
 }


 3.添加执行器 new的瞬间执行
  try{
    excutor(resolve, reject)
  }catch(e => {
    reject(e);
  })
}

2. .then方法

myPromise.prototype.then = function(onFulfilled, onRejected) {
  // 5.处理then方法

  onFulfilled = typeOf onFulfilled === 'function' ? onFulfilled : function(data) 
  {resolve(data)}

  onRejected= typeOf onRejected=== 'function' ? onRejected: function(err) {reject(err)}

   // then函数返回的是个Promise 
let Promise = new Promise((resolve, reject) => {
  // 判断当前的状态
  switch(self.status) {
    case 'pending': 
      //6.发布订阅模式
       self.onFulfilledCallback.push(onFulfilled);
       self.onRejectedCallback.push(onRejected);
       break;
    case 'fulfilled':
      setTimeout(()=> {
       try{
        let result = onFulfilled(self.value);
        resolve(result);
       }catch(e){
        reject(e)
       }      
      }, 0);
      break;
    case 'rejected':
      setTimeout(()=> {
       try{
        let result = onRejected(self.value);
        resolve(result);
       }catch(e){
        reject(e)
       }      
      }, 0);
      break;
  }
})
return promise;
}


myPromise.prototype.catch = function(onRejected) {
 return this.then(undefined, onRejected)
}

myPromise.resolved = function(value) {
 return new myPromise((resolve, reject) => {
  if (value instanceof myPromise) {
   value.then(resolved, rejected)
 } else {
  resolve(value)
 }
})
}

myPromise.rejected = function(str) {
  return new myPromise((resolve, reject) => {
   reject(str)
  })
}