一个好的程序员web前端教程分享promisepromise-ajax的封装,用于前端javascript练习functionajax(url){//创建一个promise对象varpromise=newPromise(function(resolve,reject){//创建一个promise对象ajaxobjectif(window.XMLHttpRequest){varxhr=newXMLHttpRequest();}else{varxhr=newActiveXObject("Microsoft.XMLHTTP");}xhr.open("get",url,true);xhr.send();xhr.onreadystatechange=function(){if(xhr.readyState==4){if(xhr.status==200){vardata=xhr.responseText;resolve(data);}else{reject();}}}}})返回承诺;//returnpromiseobject}trafficlighthtml结构代码css样式代码:ul{position:absolute;width:200px;height:200px;top:50%;left:50%;transform:translate(-50%,-50%);}/*画3个圆代表红绿灯*/ul>li{width:40px;height:40px;border-radius:50%;opacity:0.2;display:inline-block;}/*执行时改变透明度*/ul.red>#red,ul.green>#green,ul.yellow>#yellow{opacity:1.0;}/*流量三灯光颜色*/#red{background:red;}#yellow{background:yellow;}#green{background:green;}js实现代码:functiontimeout(timer){returnfunction(){returnnewPromise(function(resolve,reject){setTimeout(resolve,timer)})}}vargreen=timeout(1000);变种黄色=超时(1000);变种红色=超时(1000);vartraffic=document.getElementById("交通");(functionrestart(){'usestrict'//严格模式traffic.className='green';green().then(function(){traffic.className='yellow';returnyellow();}).then(function(){traffic.className='red';returnred();}).then(function(){restart()})})();