网页前端设计

本篇文章实现了如何 优雅的在 ajax中使用promise。

Promise 其实也是原生js新的特性，使用Promise可以很好的解决这些问题：

• 处理错误，比如网络请求失败
• 如果发生错误，可以传值
• 也可以处理JavaScript的错误
• 很好的解决比如回调也是一个异步操作的情况

封装方法如下：

/*利用promise封装的ajax函数*/
function ajax(method,url, data){
    /*兼容IE*/	
    var request=window.XMLHttpRequest? new XMLHttpRequest():new ActiveXObject("Microsoft.XMLHTTP");
  return new Promise(function(resolve,reject){
      request.onreadystatechange=function(){
          if(request.readyState===4){
              if(request.status===200){
                resolve(JSON.parse(request.response));
              }else{
                reject(request.status);
              }
          }
      };
      if(method.toUpperCase()=== "GET"){
        var arr = [];
        for(var key in data){
          arr.push(key + "=" + data[key]);
        }
        var getData=arr.join("&");
        
        request.open("GET",url +"?"+getData,true);
        request.send(null);
      }else if(method.toUpperCase()=== "POST"){
        request.open("POST",url,true);
        request.responseType="json";
        request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=utf-8");
        request.send(data);
      }
  });		
};

使用方法如下：

console.log("请求开始");
  var njson=[];
  ajax("get","adress.html","").then(function (json) {
    console.log("1、ajax完成后取值");
    console.log(json.cip);
    njson=json;//赋值给下一个then使用
  }, function (error) {
    console.error("1、ajax出错了", error);
  }).then(function(){
    console.log("2、ajax完成后取值");
    console.log(njson.cname);
  }, function (error) {
    console.error("2、1中then出错了", error);
  });

adress.html 返回的json数据

{"cip": "116.26.172.6", "cid": "440500", "cname": "广东省汕头市"}

(完)

如果您觉得本文的内容对您的学习有所帮助，捐赠与共勉，支付宝(左)或微信(右)