网页前端设计

http://www.86y.org

搜索文章

原生js封装ajax的函数(运用promise的回调函数)

用声音读出全文关注我吧
 2021/3/23 11:08:47 阅读次数:794

本篇文章实现了如何 优雅的在 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": "广东省汕头市"}

(完)


大家有什么问题或技术上的想法可以在此与大家分享,也可以加入前端爱好者QQ群(141999928)一起学习进步:【幸凡前端技术交流群】
如需转载请注明出处:http://www.86y.org/art_detail.aspx?id=876【原生js封装ajax的函数(运用promise的回调函数)】幸凡学习网
0

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

阅读全文内容关闭