該迭代已作廢,最新的請移步這里:https://www.cnblogs.com/GerryOfZhong/p/10726306.html
距離上一篇博客書寫,又過去了大概幾個月了,這段時間暫時離開了這個行業,讓大腦休息一下。一個人旅行,一個人休息,正好也去完成一個目標 --- 擁有自己的駕照。當然,也把自己曬的黑漆馬虎的。不過這一段時間雖然在技術上沒有學太多東西,但是在心態上給了自己一個沉淀的機會,感覺自己變得更加沉穩和成熟,感覺這就是自己需要找到的自己,回歸自我。好了,廢話不多說了,雖然技術上沒有學一些新的東西,但是欠的東西還是要補回來的。正如這篇博客,前端Promise規范的實現與ajax技術的集成,當時github上一個用戶提的,既然寫了ajax,那么Promise的規范,更優雅的操作異步也應該有的,當時記下了,現在補回來。回歸正題,下面介紹一些概念。
- Promise ES6中最重要的特性之一,就是代表了未來某個將要發生的事件(通常是一個異步操作)。它的好處在於,有了Promise對象,就可以將異步操作以同步操作的流程表達出來,避免了層層嵌套的回調函數。
- js對象的繼承和傳遞 在js中是沒有所謂的繼承概念的,繼承通常是指后台面向對象編程中對象之間的復用。因為js被叫做腳本語言,所以沒有這個概念,但是在js中都可以模擬實現的(apply,call,prototype)。其實說通俗點所謂的繼承就是作用域的傳遞。
- ajax和promise的緣分 因為ajax是一個異步的請求(雖然也可以使用同步),而promise這個狀態機也正好可以處理異步操作。兩者的相結合的產物,將是一個優雅而又快捷的產物,這個將在后面的介紹中展現。
工具准備:
1. 前端代碼,自己實現的promise規范代碼,以及集成現有es6規范的代碼。
2. nginx服務器,做分離,反向代理后台代碼
3. IIS服務器,部署后台請求(模擬一般請求和高延遲請求)
4. 各大兼容和不兼容promise的瀏覽器(做測試)
前端Promise代碼實現:
/** * Created by gerry.zhong on 2017/6/21. */ var Promise = function(fn){ var promise = this; //狀態機的狀態 var PROMISESTATE = { PENDING : 0 , FULFILLED : 1 , REJECTED : 2 }; //存儲當前變量的回調函數和標記對象為promise promise._fullCalll =[],promise._rejCall = [];promise._name = "promise"; //執行過程中的狀態變化(初始化狀態為默認狀態) var _state = PROMISESTATE.PENDING; //回調函數的參數 var _value = undefined; //狀態變更 function setState(stateT,valueT){ var promise = this; _state = stateT; _value = valueT; handleFun.call(promise); //傳遞作用域,並且執行回調函數 }; //根據狀態處理回調 function handleFun(){ var promise = this,isThen; if (_state === PROMISESTATE.FULFILLED && typeof promise._fullCalll[0] === 'function') { isThen = promise._fullCalll[0](_value); }; if (_state === PROMISESTATE.REJECTED && typeof promise._rejCall[0] === 'function') { isThen = promise._rejCall[0](_value); }; //對於是否可以繼續進行then做判斷 // 1. 不可then的,直接return結束(條件:無返回值、返回值不是promise對象的) // 2. 對於可以then的,將then的回調進行處理,然后對象之間傳遞。 if (isThen === undefined || !(typeof isThen === 'object' && isThen._name === 'promise')) return; promise._fullCalll.shift(); promise._rejCall.shift(); //清除當前對象使用過的對調 isThen._fullCalll =promise._fullCalll;isThen._rejCall = promise._rejCall; //將剩下的回調傳遞到下一個對象 }; //promimse入口 function doResolve(fn){ var promise = this; fn(function(param) { setState.call(promise,PROMISESTATE.FULFILLED,param); }, function(reason) { setState.call(promise,PROMISESTATE.REJECTED,reason); }); }; //函數then,處理回調,返回對象保證鏈式調用 this.then = function(onFulfilled,onRejected) { this._fullCalll.push(onFulfilled); this._rejCall.push(onRejected); return this; } doResolve.call(promise,fn); }
具體思路如下:
解決瀏覽器的差異性和兼容性代碼
if (!window.Promise) tool.createPromise(); //保證瀏覽器的兼容性
tool.createPromise代碼
//如果瀏覽器不支持Promise特性,將用簡易的promise代替(IE11-都不支持ES6 Promise) createPromise:function(){ var newPromise = function(fn){ var promise = this; //狀態機的狀態 var PROMISESTATE = { PENDING : 0 , FULFILLED : 1 , REJECTED : 2 }; //存儲當前變量的回調函數和標記對象為promise promise._fullCalll =[],promise._rejCall = [];promise._name = "promise"; //執行過程中的狀態變化(初始化狀態為默認狀態) var _state = PROMISESTATE.PENDING; //回調函數的參數 var _value = undefined; //狀態變更 function setState(stateT,valueT){ var promise = this; _state = stateT; _value = valueT; handleFun.call(promise); //傳遞作用域,並且執行回調函數 }; //根據狀態處理回調 function handleFun(){ var promise = this,isThen; if (_state === PROMISESTATE.FULFILLED && typeof promise._fullCalll[0] === 'function') { isThen = promise._fullCalll[0](_value); }; if (_state === PROMISESTATE.REJECTED && typeof promise._rejCall[0] === 'function') { isThen = promise._rejCall[0](_value); }; //對於是否可以繼續進行then做判斷 // 1. 不可then的,直接return結束(條件:無返回值、返回值不是promise對象的) // 2. 對於可以then的,將then的回調進行處理,然后對象之間傳遞。 if (isThen === undefined || !(typeof isThen === 'object' && isThen._name === 'promise')) return; promise._fullCalll.shift(); promise._rejCall.shift(); //清除當前對象使用過的對調 isThen._fullCalll =promise._fullCalll;isThen._rejCall = promise._rejCall; //將剩下的回調傳遞到下一個對象 }; //promimse入口 function doResolve(fn){ var promise = this; fn(function(param) { setState.call(promise,PROMISESTATE.FULFILLED,param); }, function(reason) { setState.call(promise,PROMISESTATE.REJECTED,reason); }); }; //函數then,處理回調,返回對象保證鏈式調用 this.then = function(onFulfilled,onRejected) { this._fullCalll.push(onFulfilled); this._rejCall.push(onRejected); return this; } doResolve.call(promise,fn); }; window.Promise = newPromise; },
這樣就保證了,不管在兼容和不兼容Promise的瀏覽器中,都可以使用Promise,優雅的來操作異步了。
ajax集成proise代碼(默認只開放了post和get方法,其他可自己拓展)
//集成promise的ajax請求(默認設置post和get請求,如有其他需求,可自己拓展) promiseAjax:function (url,data,type){ if (!window.Promise) tool.createPromise(); //保證瀏覽器的兼容性 return new Promise(function(resolve, reject){ if (type === undefined) ajax.post(url,data,resolve,reject); else ajax.get(url,data,resolve,reject); }); },
測試環節
對於網上很多人寫的Promise代碼仔細觀摩和研究,發現很多問題。
a. 對於並發Promise,會出現異步錯亂,發起者和接受者錯亂
b. 對於多then的情況,異步響應的不確定(高低延遲),錯亂。
c. Promise代碼實現的復雜性,多繁瑣,難理解,思路不明確。
針對以上問題,進行重要測試。
測試前端代碼
ajax.promiseAjax("api/ajax/postReq/",{"name":"q","age": 2}) .then(function(value){ console.log("一般請求q"+value); return ajax.promiseAjax("api/ajax/postReqSleep/",{"name":"w","age": 2}); }) .then(function(value){ console.log("高延遲請求w:"+value); return ajax.promiseAjax("api/ajax/postReq/",{"name":"r","age": 2}); }) .then(function(value){ console.log("一般請求r:"+value); }); ajax.promiseAjax("api/ajax/postReqSleep/",{"name":"q1","age": 2}) .then(function(value){ console.log("高延遲請求q1"+value); return ajax.promiseAjax("api/ajax/postReqSleep/",{"name":"w2","age": 2}); }) .then(function(value){ console.log("高延遲請求w2:"+value); return ajax.promiseAjax("api/ajax/postReq/",{"name":"r3","age": 2}); }) .then(function(value){ console.log("一般請求r3:"+value); });
后端模擬延遲請求代碼(C#)
[Route("postReqSleep")] public string postRequestTSleep([FromBody]Param param) { Thread.Sleep(5000); //掛起5s 做延遲 String result = "post請求成功:" + param.name + "-" + param.age; return result; }
測試結果:
chrome
ie8-11
edge
firefox
360瀏覽器
safair
代碼已集成github:https://github.com/GerryIsWarrior/ajax 點顆星星是我最大的鼓勵,有什么問題可以博客、郵箱、github上留言
還有最重要的一點,如果有問題歡迎指出來,我在github上維護這個庫,這段時間專注於前端的通信技術的研究,ajax基本完成,馬上進入SSE推送技術研究狀態
研究Promise這個內容,研究和參考了很多別人的代碼,從高別人的代碼中看到了各種問題,然后在自己代碼中測試發現和改正。所以沒有什么是絕對正確的,我寫的可能也有問題,希望大家在研究和發展的基礎上一起改進。畢竟對於前端來說,技術更新太快,ES5 ES6等等一層接一層。還是那句老話,革命尚未成功,同志仍需努力,我和你們同在。
馬上又要回去重新找工作了,希望可以找到如意的工作,畢竟為了錯開金三銀四,希望一切都會好起來。一起加油吧。