方案图网站,太原注册公司网站,旅游交友的网站建设,中国最大的软件公司排名该迭代已作废#xff0c;最新的请移步这里#xff1a;https://www.cnblogs.com/GerryOfZhong/p/10726306.html 距离上一篇博客书写#xff0c;又过去了大概几个月了#xff0c;这段时间暂时离开了这个行业#xff0c;让大脑休息一下。一个人旅行#xff0c;一个人休息最新的请移步这里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};//存储当前变量的回调函数和标记对象为promisepromise._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};//存储当前变量的回调函数和标记对象为promisepromise._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(一般请求qvalue);return ajax.promiseAjax(api/ajax/postReqSleep/,{name:w,age: 2});}).then(function(value){console.log(高延迟请求wvalue);return ajax.promiseAjax(api/ajax/postReq/,{name:r,age: 2});}).then(function(value){console.log(一般请求rvalue);});ajax.promiseAjax(api/ajax/postReqSleep/,{name:q1,age: 2}).then(function(value){console.log(高延迟请求q1value);return ajax.promiseAjax(api/ajax/postReqSleep/,{name:w2,age: 2});}).then(function(value){console.log(高延迟请求w2value);return ajax.promiseAjax(api/ajax/postReq/,{name:r3,age: 2});}).then(function(value){console.log(一般请求r3value);}); 后端模拟延迟请求代码(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 代码已集成githubhttps://github.com/GerryIsWarrior/ajax 点颗星星是我最大的鼓励有什么问题可以博客、邮箱、github上留言 还有最重要的一点如果有问题欢迎指出来我在github上维护这个库这段时间专注于前端的通信技术的研究ajax基本完成马上进入SSE推送技术研究状态 研究Promise这个内容研究和参考了很多别人的代码从高别人的代码中看到了各种问题然后在自己代码中测试发现和改正。所以没有什么是绝对正确的我写的可能也有问题希望大家在研究和发展的基础上一起改进。毕竟对于前端来说技术更新太快ES5 ES6等等一层接一层。还是那句老话革命尚未成功同志仍需努力我和你们同在。 马上又要回去重新找工作了希望可以找到如意的工作毕竟为了错开金三银四希望一切都会好起来。一起加油吧。转载于:https://www.cnblogs.com/GerryOfZhong/p/7096792.html
