Promise 是異步編程的一種解決方案，比傳統(tǒng)的解決方案——回調函數(shù)和事件——更合理和更強大。它由社區(qū)最早提出和實現(xiàn)，ES6 將其寫進了語言標準，統(tǒng)一了用法，原生提供了Promise對象。
首先我們來看一下傳統(tǒng)異步編程中常用的回調函數(shù)寫法
如圖所示，假如現(xiàn)在有這樣一個需求，點擊開始按鈕時,將綠色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函數(shù)接收四個參數(shù)，分別是要移動的元素，X坐標距離，Y坐標距離，以及回調函數(shù)，里面設置了一個定時器，1s后執(zhí)行回調函數(shù)。
可以看見，這種寫法嵌套層次太多，難以維護。下面我們看看用promise的方式如何實現(xiàn)相同的功能
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函數(shù)內部返回了一個Promise實例，Promise內部同樣采用了一個定時器來模擬異步過程的時間，一秒后執(zhí)行resolve將其狀態(tài)變?yōu)槌晒B(tài)。Promise的用法相信大家都很熟悉，我就不多贅述了，下面我們開始自己手寫一個簡易版的Promise構造函數(shù)。
首先我們創(chuàng)建一個test.js文件，再引入我們自己寫的promise.js
//promsie.js
function Promise(){
}
module.exports = Promise
-------
//test.js
let Promise = require('./promise')
let promise = new Promise((resolve,reject)=>{
})
我們都知道Promise的參數(shù)是一個立即執(zhí)行的函數(shù)，我們把他稱為excutor。同時這個函數(shù)有兩個參數(shù)，也是兩個函數(shù)，我們一般稱為resolve和 reject。
執(zhí)行這兩個函數(shù)可分別將promise的狀態(tài)改為成功態(tài)和失敗態(tài)。
那么首先我們在Promise函數(shù)里面初始化其實例上的狀態(tài)status以及成功的值value以及失敗的值reason,執(zhí)行excutor函數(shù),為了確保執(zhí)行resolve和 reject的時候將傳來的值正確的賦值給當前實例，我們需要聲明一個變量保存this,具體代碼如下
function Promise(excutor){
//pending 等待態(tài) fulfilled 成功態(tài) 失敗態(tài) rejected
this.status = 'pending'
this.value = undefined
this.reason = undefined
let self = this
function resolve(value){
self.value = value
//只有在等待態(tài)的時候才能更改
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方法，其接受兩個函數(shù)onfulfilled和onrejected
Promise.prototype.then = function(onfulfilled,onrejected){
let self = this
//如果狀態(tài)為成功，調用第一個函數(shù) 也就是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
我是成功
執(zhí)行test.js 成功打印出了我是成功。但是這是因為我們立即執(zhí)行了resolve，如果我們過段時間再執(zhí)行resolve，就不會打印了，所以我們需要在then里面對pending做處理，我們先在Promise里面先定義兩個數(shù)組用于存放成功回調和失敗回調，再在then里面將回調函數(shù)push進去，什么時候狀態(tài)變了再去調用，
//promsie.js
self.onResolveCallbacks = []
self.onRejectedCallbacks = []
function resolve(value){
self.value = value
//只有在等待態(tài)的時候才能更改
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)
})
}
接下來我們來實現(xiàn)Promise的鏈式調用，也就是promise.then().then()....,我們知道then方法如果返回一個promise 我們就會根據(jù)這個promise得狀態(tài)執(zhí)行成功或失敗函數(shù)，如果返回的是一個普通值，執(zhí)行下一個then中的成功函數(shù)。
所以我們需要在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
}
這樣我們就實現(xiàn)了鏈式調用,暫時先寫到這里。
