扒一扒PROMISE的原理，大家不要怕！
在前端的日常工作中，回調函數（callback）應該是見怪不怪了，但是當回調函數遇上了異步（async），這就令人發指了。那麽異步是什麽意思呢，簡單地說就是不等你執行完，就先執行下方的代碼了。
舉個??：
我們最常用的異步操作應該是ajax了（想當初我第一次用ajax的時候，簡直就是災難。明明資源加載成功了，怎麽就是沒有調到資源中的數據呢？真令人頭大啊。），只能等待加載完畢，再執行相關操作才能成功。因此我們看到的代碼應該都是這樣的。
/** @param callback 回調函數 */ function getData(url,callback){ $.ajax({ url:url, success:function(result){ callback(result)； } }); } //假設我有好多個ajax，每個ajax都需要上一個ajax的支持，於是……地獄出現了…… getData(url1,function(res){ getData(url2,function(res){ getData(url3,function(res){ //終於可以幹正事了 }) }) })
朋友們，回調地獄（callback Hell）了解下。
於是promise出現了，他的出現就是解決了回調地獄！他對異步的函數進行了封裝，把回調變成了鏈式調用。
舉個??：
function getData(url){ return new Promise((resolve,reject)=>{ $.ajax({ url:url, success:function(result){ resolve(result)； }, error:function(error){ reject(error); } }); }) } getData(url1).then(function(res){ return getData(url2) }).then(function(res){ return getData(url3) }).then(function(res){ //幹正事啦！ })
確實。簡介了不少，至少不會被裏三層外三層的括號弄暈。
但是當初我聽到promise的時候，我內心是拒絕的。雖然內心拒絕，但是該來的還是要來的，該學的還是要學的，畢竟時代在進步，與時俱進還是很必要的！那麽這個promise是怎麽實現的呢？？？
實現一：狀態
小夥伴們，這裏promise可不是男女約會中浪漫的臺詞 ”I promise XXX“ ，而是一種規範，點擊此處獲取規範。不過這裏的promise和現實生活中的promise一樣，都有實現（fulfilled），拒絕（rejected）和等待（pending）這三種狀態。
舉個??：
假定 Mary 和 Mike 是一對情侶，半年前，Mike 向 Mary 承諾（promise）半年內完成他們的婚禮，但是直到現在 Mike 也沒有做出行動，因此 Mary 表示她不會一直等待（pending）下去，於是他們分手了，那麽這個承諾（promise）就是作廢了（rejected）。如果這半年內 Mike 結了婚，那麽現在 Mike 應該已經實現（fulfilled）了他對 Mary 的承諾（promise）。
所以說，所有的promise都有一個結果狀態——實現（fulfilled）或者拒絕（rejected），而結果出來之前的狀態就是等待（pending）。
function Promise(executor){
let _=this;
_.value=undefined;
_.reason=undefined;
_.state="pending"//大家一開始都是一樣，等著吧
function resolve(value){
_.value=value//實現之後的感言
_.state="fulfilled"//實現啦！
}
function reject(reason){
_.reason=reason//給我一個被拒絕的理由
_.state="rejected"//被拒絕了！
}
executor(resolve,reject)
}
//e.g
let Iagree=new Promise((resolve,reject)=>{
resolve("我開心就同意了");//
})
let Idisagree=new Promise((resolve,reject)=>{
reject("我不開心就拒絕了");
})
let noResult=new Promise((resolve,reject)=>{
})
console.log(Iagree.state,Idisagree.state,noResult.state)實現二：添加then函數
不過我只知道一個狀態有何用？我還要進行下一步噠！我們需要一個then，用於進行下一步的操作。
Promise.prototype.then=function(onFulfilled, onRejected){
let _=this;
if(_.state=="pending"){}
if(_.state=="fulfilled"){
onFulfilled(_.value)
}
if(_.state=="rejected"){
onRejected(_.reason)
}
}
//e.g
let Iagree=new Promise((resolve,reject)=>{
resolve("我開心就同意了");//強行完成（fullfilled）
})
Iagree.then((data)=>{
console.log(Iagree.state)
},(e)=>{
console.log(e)
})實現三：實現異步執行
不過這個都是同時進行，不是異步的。我們來瞅一眼異步～
這個時候我們需要把回調函數丟到resolve或者reject中，但是如果我們的後續方法很多呢？then好多次怎麽辦！將回調丟到的隊列中，到時候Foreach一下逐個執行。
function Promise(executor){
let _=this;
_.value=undefined;
_.reason=undefined;
_.state="pending"//大家一開始都是一樣，等著吧
_.resolveCallbacks=[];//callbacks在pending中添加，fullfilled中執行
_.rejectCallbacks=[];//callbacks在pending中添加，rejected中執行
function resolve(value){
_.value=value//實現之後的感言
_.state="fulfilled"//實現啦！
_.resolveCallbacks.forEach((fn)=>fn())
}
function reject(reason){
_.reason=reason//給我一個被拒絕的理由
_.state="rejected"//被拒絕了！
_.rejectCallbacks.forEach((fn)=>fn())
}
executor(resolve,reject)
}
Promise.prototype.then=function(onFulfilled, onRejected){
let _=this;
if(_.state=="pending"){
//把回調方法塞進隊列中
_.resolveCallbacks.push(()=>{
onFulfilled(_.value)
})
_.rejectCallbacks.push(()=>{
onRejected(_.reason)
})
}
if(_.state=="fulfilled"){
onFulfilled(_.value)
}
if(_.state=="rejected"){
onRejected(_.reason)
}
}
//e.g
let Iagree=new Promise((resolve,reject)=>{
setTimeout(()=>{
resolve("我開心就同意了");
},1000)
})
//為了防止多次then，所以回調方法需要丟入隊列中，防止方法被覆蓋。
Iagree.then((data)=>{
console.log(Iagree.state)
},(e)=>{
console.log(e)
})
Iagree.then((data)=>{
console.log(Iagree.state+1)
},(e)=>{
console.log(e)
})實現四：實現鏈式調用
那麽問題來了，如果我直接then，可不可以？像這這樣：
Iagree.then((data)=>{
...
}).then((data)=>{
...
}).then((data)=>{
...
})如果想要這樣寫，那麽上一步的then必須返回一個promise對象才可以，不然哪裏變出一個then方法。因此我們需要在then中new一個新的promise，用於下一個鏈式調用的then。
function resolvePromise(promise,x,resolve,reject){
//如果x可能是一個promise
if(x!==null&&(typeof x==="object"||typeof x==="function")){
let then=x.then;
//如果x是一個promise，因為promise都要有then函數的
if(typeof then === "function"){
//y表示x這個promise的值
then.call(x,y=>{
//繼續遍歷，直至返回值不是promise
resolvePromise(promise,y,resolve,reject)
},err=>{
reject(err)
})
}else{
//如果x是個普通對象，直接運行
resolve(x)
}
}else{
//如果x不是一個promise，也就是x是一個常量，直接運行
resolve(x)
}
}
Promise.prototype.then=function(onFulfilled, onRejected){
let _=this;
let promise2;
//將當前promise的值傳遞到下一次then的調用中
function resolveFunction(promise,resolve,reject){
let x=onFulfilled(_.value)
resolvePromise(promise,x,resolve,reject)
}
function rejectFunction(promise,resolve,reject){
let x=onRejected(_.reason)
resolvePromise(promise,x,resolve,reject)
}
promise2=new Promise((resolve,reject)=>{
if(_.state=="pending"){
//把回調方法塞進隊列中
_.resolveCallbacks.push(()=>{
resolveFunction(promise2,resolve,reject)
})
_.rejectCallbacks.push(()=>{
rejectFunction(promise2,resolve,reject)
})
}
if(_.state=="fulfilled"){
resolveFunction(promise2,resolve,reject)
}
if(_.state=="rejected"){
rejectFunction(promise2,resolve,reject)
}
})
return promise2
}
//e.g
let Iagree=new Promise((resolve,reject)=>{
setTimeout(()=>{
resolve("我開心就同意了");
},1000)
})
//為了防止多次then，所以回調方法需要丟入隊列中，防止方法被覆蓋。
Iagree.then((data)=>{
console.log(data)
return new Promise((resolve,reject)=>{
setTimeout(()=>{
resolve("看心情幹活");
},1000)
})
}).then((data)=>{
console.log("前方返回一個promise："+data)
return data+"，我是一個常量"
}).then((data)=>{
console.log("常量返回："+data)
}).then((data)=>{
console.log("前方無法返回："+data)
})這樣我們就可以愉快地用鏈式調用promise了，想想就美滋滋。
不過以上只是簡單粗暴的實現promise的方式，只是一個原理，還有promise的一些規範需要完善點擊此處獲取規範。
扒一扒PROMISE的原理，大家不要怕！