文章详细
原生js封装ajax的函数(运用promise的回调函数)
 2021/3/23 11:08:47 评论:0人 阅读次数:3198

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

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

封装方法如下:

/*利用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": "广东省汕头市"}

(完)

如需转载请注明出处:http://www.86y.org/art_detail.aspx?id=876【原生js封装ajax的函数(运用promise的回调函数)】幸凡学习网
0
 
相关文章
推荐文章
Created By Charry-May 3,2010
粤ICP备10093478号-1
顶部