promise原理与源码分析

promise

1、主要用于异步计算
2、可以将异步操作队列化，按照期望的顺序执行，返回符合预期的结果 （解决回调地狱）
3、可以在对象之间传递和操作promise，帮助我们处理队列

为什么会有promise：
异步请求： 则是将耗时很长的A交付的工作交给系统之后，就去继续做B交付的工作，。等到系统完成了前面的工作之后，再通过回调或者事件，继续做A剩下的工作。

常见异步操作：
1.事件监听

document.getElementById('#start').addEventListener('click', start, false);
function start() {
  // 响应事件，进行相应的操作
}
// jquery on 监听
$('#start').on('click', start)

2.回调

// 比较常见的有ajax
$.ajax('http://www.wyunfei.com/', {
 success (res) {
   // 这里可以监听res返回的数据做回调逻辑的处理
 }
})

// 或者在页面加载完毕后回调
$(function() {
 // 页面结构加载完成，做回调逻辑处理
})

异步回调问题

1处理异步是通过纯粹的回调函数的形式进行处理，嵌套层次深，不好维护
像下面的例子多几个嵌套，难以维护

$.ajax({
		url: 'http://backend.hft.jajabjbj.top/htodo/v1/users',
		dataType: 'jsonp',
		success: (res) => {
			let id = res.content.filter(item => {
				if(item.employeeName === "张三s"){
					return item
				}
			})[0].id

			$.ajax({
				url: `http://backend.hft.jajabjbj.top/htodo/v1/users?id={id}`,
				dataType: 'jsonp',
				success: (res) => {
					let email = res.content
					console.log(email)
				}
			})
		}
	})

promise详解

单独使用promise

new Promise(
		function (resolve, reject){
			resolve('成功');
		}
	).then(
		(res) => {console.log(res)},
		(err) => {console.log(err)}
	)

ajax+promise

function loadXMLDoc()
{
	let url = 'http://backend.hft.jajabjbj.top/htodo/v1/users'
	console.log(
		ajaxPromise({
		url: url,
		type: 'get'
		}).then(res => {
			console.log(res)
		}).catch(err => {
			console.log(err)
		})
	)
}

function ajaxPromise(data){
		return new Promise((resolve,reject) => {
			$.ajax({
				url: data.url,
				type: data.type,
				success: (res) => {
					resolve(res)
				},
				error: (err) => {
					reject(err)
				}
			})
		})
}

三个状态：
1、pending[待定]初始状态
2、fulfilled[实现]操作成功
3、rejected[被否决]操作失败
resolve将promise对象状态从pending 转为 fufilled
reject 将promise对象状态从pending 转为 rejected
promise对象状态发生变化，触发then（）中响应函数
一旦状态发生变化（只有两种状态变化情况），就会凝固（不在变化）

new Promise(resolve => {
		setTimeout(() => {
			resolve('hello')
		}, 2000);
		console.log('run')
	}).then(res => {
		console.log(res)
	})

上述例子可以分出
Event-Loop:
（检查还有没有微任务需要处理）
（结束本次宏任务、检查还有没有宏任务需要处理）
每完成一个任务都会进行一次，而这样的操作就被称为Event Loop

异步任务和同步任务：异步比同步后执行

微任务、宏任务：都是异步任务，微任务(如promise.then() )比宏任务(如setTimeout)先执行

new Promise(resolve => {
		setTimeout(() => {
			resolve('hello1')
		}, 2000);
		console.log('run1')
	}).then(res => {
		console.log(res)
		return new Promise(resolve => {
			setTimeout(() => {
				resolve('hello2')
			}, 2000);
			console.log('run2')
		})
	}).then(res => {
		console.log(res)
	})

在这里插入图片描述
.then()细节注意
1.通过对.then()返回一个新的Promise实例，所以它可以链式调用
2.接收两个函数作为参数，分别代表fulfilled（成功）和rejected（失败）
3.当前面的Promise状态改变时，.then()根据其最终状态，选择特定的状态响应函数执行
4.如果返回其他任何值，则会立即执行下一级.then()
5.如果返回新的promise，那么下一级.then()会在新的promise状态改变之后执行
6.因为.then()返回的还是Promise实例，会等里面的then()执行完，再执行外面的

new Promise(resolve => {
		setTimeout(() => {
			resolve('hello1')
		}, 2000);
		console.log('run1')
	}).then(res => {
		console.log('123'+res)
		return new Promise(resolve => {
			setTimeout(() => {
				resolve('hello2')
			}, 2000);
			console.log('run2')
		}).then(res => {
			console.log('789'+res)
			return res
		})
	}).then(res => {
		console.log('456'+res)
	})

//执行顺序
//(index):13 run1
//(index):15 123hello1
//(index):20 run2
//(index):22 789hello2
//(index):26 456hello2

错误处理两种做法：
第一种：reject(‘错误信息’).then(() => {}, () => {错误处理逻辑})
第二种：throw new Error(‘错误信息’).catch( () => {错误处理逻辑})
推荐使用第二种方式，更加清晰好读，并且可以捕获前面所有的错误（可以捕获N个then回调错误）

//第一种
new Promise((resolve,reject) => {
		reject('123')
	}).then(res => {
		console.log(res)
	},(err) => {
		console.log(err)
	})
//第二种
new Promise((resolve,reject) => {
		throw new Error('123')
	}).then(res => {
		console.log(res)
	}).catch(err => {
		console.log(err)
	})

catch也会返回一个promise实例，并且是resolved状态，可以调用.then()

Promise.all() 批量执行

Promise.all([p1, p2, p3])用于将多个promise实例，包装成一个新的Promise实例，返回的实例就是普通的promise
当所有的子Promise都完成，该Promise完成，返回值是全部值得数组

//切菜
    function cutUp(){
        console.log('开始切菜。');
        var p = new Promise(function(resolve, reject){        //做一些异步操作
            setTimeout(function(){
                console.log('切菜完毕！');
                resolve('切好的菜');
            }, 1000);
        });
        return p;
    }

    //烧水
    function boil(){
        console.log('开始烧水。');
        var p = new Promise(function(resolve, reject){        //做一些异步操作
            setTimeout(function(){
                console.log('烧水完毕！');
                resolve('烧好的水');
            }, 1000);
        });
        return p;
    }

    Promise.all([cutUp(), boil()])
        .then((result) => {
            console.log('准备工作完毕');
            console.log(result);
        })


//(index):36 开始切菜。
//(index):48 开始烧水。
//(index):39 切菜完毕！
//(index):51 烧水完毕！
//(index):60 准备工作完毕
//(index):61 (2) ["切好的菜", "烧好的水"]

有任何一个失败，该Promise失败，返回值是第一个失败的子Promise结果

Promise.race() 批量执行

区别在于它有任意一个完成就算完成


//(index):36 开始切菜。
//(index):48 开始烧水。
//(index):39 切菜完毕！
//(index):60 准备工作完毕
//(index):61 切好的菜
//(index):51 烧水完毕！

解决回调地狱

function loadXMLDoc()
{

	getID('123').then(res => {
		console.log(res)
		return getID('456')
	}).then(res => {
		console.log(res)
	})
	
}

const getID = function(val){
		return new Promise((resolve,reject) => {
			setTimeout(() => {
				resolve(val)
			}, 2000);
		})
}

//通过promise封装一个ajax，Axios基本原理就是这样，不过用的好像是原生ajax
const axios = function(data){
	return new Promise((resolve, reject) => {
		$.ajax({
      		url: data.url,
			type: data.type,
      		success (res) {
        		resolve(res)
     	 	}
    	})
	})
}

源码

不全而且是别人模仿的

  // 判断变量否为function
  const isFunction = variable => typeof variable === 'function'
  // 定义Promise的三种状态常量
  const PENDING = 'PENDING'
  const FULFILLED = 'FULFILLED'
  const REJECTED = 'REJECTED'

  class MyPromise {
    constructor (handle) {
      if (!isFunction(handle)) {
        throw new Error('MyPromise must accept a function as a parameter')
      }
      // 添加状态
      this._status = PENDING
      // 添加状态
      this._value = undefined
      // 添加成功回调函数队列
      this._fulfilledQueues = []
      // 添加失败回调函数队列
      this._rejectedQueues = []
      // 执行handle
      try {
        handle(this._resolve.bind(this), this._reject.bind(this)) 
      } catch (err) {
        this._reject(err)
      }
    }
    // 添加resovle时执行的函数
    _resolve (val) {
      const run = () => {
        if (this._status !== PENDING) return
        this._status = FULFILLED
        // 依次执行成功队列中的函数，并清空队列
        const runFulfilled = (value) => {
          let cb;
          while (cb = this._fulfilledQueues.shift()) {
            cb(value)
          }
        }
        // 依次执行失败队列中的函数，并清空队列
        const runRejected = (error) => {
          let cb;
          while (cb = this._rejectedQueues.shift()) {
            cb(error)
          }
        }
        /* 如果resolve的参数为Promise对象，则必须等待该Promise对象状态改变后,
          当前Promsie的状态才会改变，且状态取决于参数Promsie对象的状态
        */
        if (val instanceof MyPromise) {
          val.then(value => {
            this._value = value
            runFulfilled(value)
          }, err => {
            this._value = err
            runRejected(err)
          })
        } else {
          this._value = val
          runFulfilled(val)
        }
      }
      // 为了支持同步的Promise，这里采用异步调用
      setTimeout(run, 0)
    }
    // 添加reject时执行的函数
    _reject (err) { 
      if (this._status !== PENDING) return
      // 依次执行失败队列中的函数，并清空队列
      const run = () => {
        this._status = REJECTED
        this._value = err
        let cb;
        while (cb = this._rejectedQueues.shift()) {
          cb(err)
        }
      }
      // 为了支持同步的Promise，这里采用异步调用
      setTimeout(run, 0)
    }
    // 添加then方法
    then (onFulfilled, onRejected) {
      const { _value, _status } = this
      // 返回一个新的Promise对象
      return new MyPromise((onFulfilledNext, onRejectedNext) => {
        // 封装一个成功时执行的函数
        let fulfilled = value => {
          try {
            if (!isFunction(onFulfilled)) {
              onFulfilledNext(value)
            } else {
              let res =  onFulfilled(value);
              if (res instanceof MyPromise) {
                // 如果当前回调函数返回MyPromise对象，必须等待其状态改变后在执行下一个回调
                res.then(onFulfilledNext, onRejectedNext)
              } else {
                //否则会将返回结果直接作为参数，传入下一个then的回调函数，并立即执行下一个then的回调函数
                onFulfilledNext(res)
              }
            }
          } catch (err) {
            // 如果函数执行出错，新的Promise对象的状态为失败
            onRejectedNext(err)
          }
        }
        // 封装一个失败时执行的函数
        let rejected = error => {
          try {
            if (!isFunction(onRejected)) {
              onRejectedNext(error)
            } else {
                let res = onRejected(error);
                if (res instanceof MyPromise) {
                  // 如果当前回调函数返回MyPromise对象，必须等待其状态改变后在执行下一个回调
                  res.then(onFulfilledNext, onRejectedNext)
                } else {
                  //否则会将返回结果直接作为参数，传入下一个then的回调函数，并立即执行下一个then的回调函数
                  onFulfilledNext(res)
                }
            }
          } catch (err) {
            // 如果函数执行出错，新的Promise对象的状态为失败
            onRejectedNext(err)
          }
        }
        switch (_status) {
          // 当状态为pending时，将then方法回调函数加入执行队列等待执行
          case PENDING:
            this._fulfilledQueues.push(fulfilled)
            this._rejectedQueues.push(rejected)
            break
          // 当状态已经改变时，立即执行对应的回调函数
          case FULFILLED:
            fulfilled(_value)
            break
          case REJECTED:
            rejected(_value)
            break
        }
      })
    }
    // 添加catch方法
    catch (onRejected) {
      return this.then(undefined, onRejected)
    }
    // 添加静态resolve方法
    static resolve (value) {
      // 如果参数是MyPromise实例，直接返回这个实例
      if (value instanceof MyPromise) return value
      return new MyPromise(resolve => resolve(value))
    }
    // 添加静态reject方法
    static reject (value) {
      return new MyPromise((resolve ,reject) => reject(value))
    }
    // 添加静态all方法
    static all (list) {
      return new MyPromise((resolve, reject) => {
        /**
         * 返回值的集合
         */
        let values = []
        let count = 0
        for (let [i, p] of list.entries()) {
          // 数组参数如果不是MyPromise实例，先调用MyPromise.resolve
          this.resolve(p).then(res => {
            values[i] = res
            count++
            // 所有状态都变成fulfilled时返回的MyPromise状态就变成fulfilled
            if (count === list.length) resolve(values)
          }, err => {
            // 有一个被rejected时返回的MyPromise状态就变成rejected
            reject(err)
          })
        }
      })
    }
    // 添加静态race方法
    static race (list) {
      return new MyPromise((resolve, reject) => {
        for (let p of list) {
          // 只要有一个实例率先改变状态，新的MyPromise的状态就跟着改变
          this.resolve(p).then(res => {
            resolve(res)
          }, err => {
            reject(err)
          })
        }
      })
    }
    finally (cb) {
      return this.then(
        value  => MyPromise.resolve(cb()).then(() => value),
        reason => MyPromise.resolve(cb()).then(() => { throw reason })
      );
    }
  }