Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。它由社区最早提出和实现，ES6 将其写进了语言标准，统一了用法，原生提供了Promise对象。
首先我们来看一下传统异步编程中常用的回调函数写法
如图所示，假如现在有这样一个需求，点击开始按钮时,将绿色div元素移动到A位置再移动到B位置，再移动到c位置。。。我们可能写出这样的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#el {
width: 50px;
height: 50px;
background: green;
transition: all 1s;
color: white;
line-height: 50px;
text-align: center;
font-size: 30px;
}
</style>
</head>
<body>
<div id="el">div</div>
<button id="btn">开始</button>
<script>
// 动画
function moveTo(el, x, y, cb) {
el.style.transform = `translate(${x}px, ${y}px)`;
setTimeout(function() {
cb && cb();
}, 1000);
}
let el = document.querySelector('div');
document.querySelector('button').addEventListener('click', e => {
moveTo(el, 100, 100, function() {
moveTo(el, 200, 200, function() {
moveTo(el, 30, 20, function() {
moveTo(el, 100, 300, function() {
moveTo(el, 130,20, function() {
moveTo(el, 0, 0, function() {
console.log('移动结束!');
});
});
});
});
});
});
});
moveTo函数接收四个参数，分别是要移动的元素，X坐标距离，Y坐标距离，以及回调函数，里面设置了一个定时器，1s后执行回调函数。
可以看见，这种写法嵌套层次太多，难以维护。下面我们看看用promise的方式如何实现相同的功能
function moveTo(el, x, y) {
return new Promise(resolve => {
el.style.transform = `translate(${x}px, ${y}px)`;
setTimeout(function() {
resolve();
}, 1000);
});
}
let el = document.querySelector('div');
document.querySelector('button').addEventListener('click', e => {
moveTo(el, 100, 100)
.then(function() {
return moveTo(el, 200, 200);
})
.then(function() {
return moveTo(el, 300, 300);
})
.then(function() {
return moveTo(el, 400, 400);
})
.then(function() {
return moveTo(el, 0, 0);
});
});
Promise使用了链式调用的方法，结构明显清晰许多。
此时，moveTo函数内部返回了一个Promise实例，Promise内部同样采用了一个定时器来模拟异步过程的时间，一秒后执行resolve将其状态变为成功态。Promise的用法相信大家都很熟悉，我就不多赘述了，下面我们开始自己手写一个简易版的Promise构造函数。
首先我们创建一个test.js文件，再引入我们自己写的promise.js
//promsie.js
function Promise(){
}
module.exports = Promise
-------
//test.js
let Promise = require('./promise')
let promise = new Promise((resolve,reject)=>{
})
我们都知道Promise的参数是一个立即执行的函数，我们把他称为excutor。同时这个函数有两个参数，也是两个函数，我们一般称为resolve和 reject。
执行这两个函数可分别将promise的状态改为成功态和失败态。
那么首先我们在Promise函数里面初始化其实例上的状态status以及成功的值value以及失败的值reason,执行excutor函数,为了确保执行resolve和 reject的时候将传来的值正确的赋值给当前实例，我们需要声明一个变量保存this,具体代码如下
function Promise(excutor){
//pending 等待态 fulfilled 成功态 失败态 rejected
this.status = 'pending'
this.value = undefined
this.reason = undefined
let self = this
function resolve(value){
self.value = value
//只有在等待态的时候才能更改
if(self.status === 'pending'){
self.status ='fulfilled'
}
console.log(this)
}
function reject(reason){
self.reason = reason
if(self.status === 'pending'){
self.status ='rejected'
}
}
try{
excutor(resolve,reject)
}catch(e){
reject(e)
}
}
Promise实例上面有一个then方法，其接受两个函数onfulfilled和onrejected
Promise.prototype.then = function(onfulfilled,onrejected){
let self = this
//如果状态为成功，调用第一个函数 也就是onfulfilled
if(self.status === 'fulfilled'){
onfulfilled(self.value)
}
if(self.status === 'rejected'){
onrejected(self.reason)
}
}
--------
let promise = new Promise((resolve,reject)=>{
// setTimeout(()=>{
resolve('我是成功')
// },1000)
})
console.log(222)
promise.then((val)=>{
console.log(val)
})
-------
node test.js
222
我是成功
执行test.js 成功打印出了我是成功。但是这是因为我们立即执行了resolve，如果我们过段时间再执行resolve，就不会打印了，所以我们需要在then里面对pending做处理，我们先在Promise里面先定义两个数组用于存放成功回调和失败回调，再在then里面将回调函数push进去，什么时候状态变了再去调用，
//promsie.js
self.onResolveCallbacks = []
self.onRejectedCallbacks = []
function resolve(value){
self.value = value
//只有在等待态的时候才能更改
if(self.status === 'pending'){
self.status = 'fulfilled'
self.onResolveCallbacks.forEach(fn=>fn())
}
}
function reject(reason){
self.reason = reason
if(self.status === 'pending'){
self.status = 'rejected'
self.onRejectedCallbacks.forEach(fn=>fn())
}
}
-------
//then
if(self.status === 'pending'){
self.onResolveCallbacks.push(function(){
onfulfilled(self.value)
})
self.onRejectedCallbacks.push(function(){
onrejected(self.reason)
})
}
接下来我们来实现Promise的链式调用，也就是promise.then().then()....,我们知道then方法如果返回一个promise 我们就会根据这个promise得状态执行成功或失败函数，如果返回的是一个普通值，执行下一个then中的成功函数。
所以我们需要在then方法里面return一个新的 promise实例，再写一个resolvePromise方法处理resolve或者reject的返回值
function resolvePromise(promise2,x,resolve,reject){
//对x进行判断 如果是一个普通值 直接resolve
if(promise2 === x){
return reject(new TypeError('不能return自己'))
}
if(x!==null && (typeof x === 'object' || typeof x === 'function')){
try{
let then = x.then
if(typeof then === 'function'){
then.call(x,y=>{
resolve(y)
},r=>{
reject(r)
})
}else{
resolve(x)
}
}catch(e){
}
}else{
resolve(x)
}
}
Promise.prototype.then = function(onfulfilled,onrejected){
let self = this
let promise2 = new Promise(function(resolve,reject){
if(self.status === 'fulfilled'){
//用定时器保证能拿到promise2
setTimeout(()=>{
try{
let x = onfulfilled(self.value)
resolvePromise(promise2,x,resolve,reject)
}catch(e){
reject(e)
}
})
}
if(self.status === 'rejected'){
setTimeout(()=>{
try{
let x = onrejected(self.reason)
resolvePromise(promise2,x,resolve,reject)
}catch(e){
reject(e)
}
})
}
if(self.status === 'pending'){
self.onResolveCallbacks.push(function(){
setTimeout(()=>{
try{
let x = onfulfilled(self.value)
resolvePromise(promise2,x,resolve,reject)
}catch(e){
reject(e)
}
})
})
self.onRejectedCallbacks.push(function(){
setTimeout(()=>{
try{
let x = onrejected(self.reason)
resolvePromise(promise2,x,resolve,reject)
}catch(e){
reject(e)
}
})
})
}
})
return promise2
}
这样我们就实现了链式调用,暂时先写到这里。
