使用Promise封装一个 Ajax

原创

钟俊耀

修改于 2019-09-19 14:33:08

1.8K0

修改于 2019-09-19 14:33:08

文章被收录于专栏：AJAXAJAX

前提

观看该文章之前，你需要具备的知识有：

Promise的使用，包含 Promise#then，Promise#catch，Promise.resolve，Promise.reject；
XHR 的使用，包含低版本浏览器实现的兼容操作等；
函数的使用，包含回调，传递，执行等；

XMLHttpRequest 实现请求函数封装

首先， XMLHttpRequest （XHR）对象可以与服务器交互。你可以从URL获取数据，而无需让整个的页面刷新。这允许网页在不影响用户的操作的情况下更新页面的局部内容。在 Ajax 编程中 XMLHttpRequest 被大量使用。

XMLHttpRequest()该构造函数用于初始化一个 XMLHttpRequest 对象。在调用下列任何其他方法之前，必须先调用该构造函数，或通过其他方式间接得到一个 XMLHttpRequest 对象。

XMLHttpRequest.onreadystatechange

当 readyState 属性发生变化时调用的 EventHandler。

XMLHttpRequest.responseText 一个用于定义响应类型的枚举值（enumerated value）。

XMLHttpRequest.readyState 只读

返回一个无符号短整型（unsigned short）数字，代表请求的状态码。

XMLHttpRequest.responseType

一个用于定义响应类型的枚举值（enumerated value），可选值：

值	描述
""	将 responseType 设为空字符串与设置为"text"相同，是默认类型（实际上是 DOMString）。
"arraybuffer"	response 是一个包含二进制数据的 JavaScript ArrayBuffer 。
"blob"	response 是一个包含二进制数据的 Blob 对象。
"document"	response 是一个 HTML Document 或 XML XMLDocument ，这取决于接收到的数据的 MIME 类型。请参阅 HTML in XMLHttpRequest 以了解使用 XHR 获取 HTML 内容的更多信息。
"json"	response 是一个 JavaScript 对象。这个对象是通过将接收到的数据类型视为 JSON 解析得到的。
"text"	response 是包含在 DOMString 对象中的文本。
"moz-chunked-arraybuffer"	与"arraybuffer"相似，但是数据会被接收到一个流中。使用此响应类型时，响应中的值仅在 progress 事件的处理程序中可用，并且只包含上一次响应 progress 事件以后收到的数据，而不是自请求发送以来收到的所有数据。在 progress 事件处理时访问 response 将返回到目前为止收到的数据。在 progress 事件处理程序之外访问， response的值会始终为 null 。
"ms-stream"	response 是下载流的一部分；此响应类型仅允许下载请求，并且仅受Internet Explorer支持。

XMLHttpRequest.response 只读

返回一个 ArrayBuffer、Blob、Document，或 DOMString，具体是哪种类型取决于 XMLHttpRequest.responseType 的值。其中包含整个响应体（response body）。

XMLHttpRequest.responseText 只读

返回一个 DOMString，该 DOMString 包含对请求的响应，如果请求未成功或尚未发送，则返回 null。

XMLHttpRequest.responseURL 只读

返回响应的序列化（serialized）URL，如果该 URL 为空，则返回空字符串。

XMLHttpRequest.status 只读

返回一个无符号短整型（unsigned short）数字，代表请求的响应状态。

XMLHttpRequest.statusText 只读

返回一个 DOMString，其中包含 HTTP 服务器返回的响应状态。与 XMLHTTPRequest.status 不同的是，它包含完整的响应状态文本（例如，"200 OK"）。

// 序列化参数
function serialize(data){
  if(!data) return '';
  var pairs = [];
  for(var name in data){
    if(!data.hasOwnProperty(name)) continue;
    if(typeof data[name] === 'function') continue;
    var value = data[name].toString();
    name = encodeURIComponent(name);
    value = encodeURIComponent(value);
    pairs.push(name + '=' + value);
  }
  return pairs.join('&');
}

// 创 Ajax 请求对象，兼容ie8，ie9
function XHR(){
   var xObj;
   if (window.XMLHttpRequest) {
       xObj = new XMLHttpRequest();
   } else if (window.ActiveXObjext) {
       xObj = new ActiveXObject();
   }
   return xObj;
}

// get封装
function get(url,header,options,callback){
 
  var xhr = XHR();
  xhr.onload = function(){
    callback(xhr.responseText);
  }
  xhr.onerror = function(callback){
    callback(xhr.status);
  }
  url = url+'?'+serialize(options);
  xhr.open('get',url,true);
  for(var i in header){
    xhr.setRequestHeader(i,header[i]);
  }
  xhr.send(null);
}
// get请求start
var method = 'GET',
  url = 'http://ali-weather.showapi.com/hour24',
  header = {
      'Content-Type': 'application/json',
      'Authorization': 'APPCODE d27f87315ec34adf88a4437769a09b76'
    },
  data = {
      area: '广州'
    };

get(url,header,data,function(params){
  console.log(JSON.parse(params));
})

// post封装
function post(url,header,options,callback){
  var xhr = createAjax();
  xhr.onload = function(){
    callback(xhr.responseText);
  };
  xhr.onerror = function(callback){
    console.log(xhr.status);
  };
  xhr.open('post', url, true);
  for(var i in header){
    xhr.setRequestHeader(i,header[i]);
  }
  xhr.send(serialize(data));
}
var method = 'POST',
    url = 'http://ali-weather.showapi.com/hour24',
    header = {
       'Content-Type': 'application/json',
       'Authorization': 'APPCODE d27f87315ec34adf88a4437769a09b76'
    },
    data = {
       area: '广州'
    };

post(url,header,data,function(params){
  console.log(JSON.parse(params));
})

Promise 封装

// 序列化参数
function serialize(data){
  if(!data) return '';
  var pairs = [];
  for(var name in data){
    if(!data.hasOwnProperty(name)) continue;
    if(typeof data[name] === 'function') continue;
    var value = data[name].toString();
    name = encodeURIComponent(name);
    value = encodeURIComponent(value);
    pairs.push(name + '=' + value);
  }
  return pairs.join('&');
}

// 创 Ajax 请求对象，兼容ie8，ie9
function XHR(){
   var xObj;
   if (window.XMLHttpRequest) {
       xObj = new XMLHttpRequest();
   } else if (window.ActiveXObjext) {
       xObj = new ActiveXObject();
   }
   return xObj;
}

// get封装
function ajax(url, data, method='GET', responseType='json', header){
  return new Promise((resolve,reject)=>{
    var xhr = XHR();
    var params = null
    xhr.onreadystatechange  = handler; // 请求状态变化时的回调处理函数
    if(method.toUpperCase() === 'GET'){
      url = url+'?'+serialize(data);
    }else if(method,toUpperCase() === 'POST'){
      params = serialize(data)
    }
    xhr.open(method,url,true);
    for(var i in header){
      xhr.setRequestHeader(i,header[i]);
    }
    !xhr['Content-Type'] && (xhr['Content-Type'] = 'application/json')
    xhr.responseType = responseType
    xhr.send(params);

    function handler(){
      if(this.readyState !== 4){
        return ;
      }
      if(this.status === 200){
        resolve(this.response)
      }else {
        reject(new Error(this.statusText));
      }
    }
  })
}
// get请求start
var method = 'GET',
  url = 'http://songfens.club:3000/goods/list',
  header = {
    'Content-Type': 'application/json',
    'Accept':'application/json'
  },
  data = {
    page:1,
    pageSize:8,
    sort:1,
    priceLevel:'all'
  };

ajax(url, data, method, responseType='json', header).then((res)=>{
  console.log(res);
}).catch(err=>{
  console.warn(err)
})

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

node.js