使用Promise封装一个 Ajax

简介: 观看该文章之前,你需要具备的知识有:Promise的使用,包含 Promise#then,Promise#catch,Promise.resolve,Promise.reject;XHR 的使用,包含低版本浏览器实现的兼容操作等;函数的使用,包含回调,传递,执行等;

前提

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

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


XMLHttpRequest 实现请求函数封装

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

image.png

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 只读

返回一个 ArrayBufferBlobDocument,或 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")。

// 序列化参数functionserialize(data){
if(!data) return'';
varpairs= [];
for(varnameindata){
if(!data.hasOwnProperty(name)) continue;
if(typeofdata[name] ==='function') continue;
varvalue=data[name].toString();
name=encodeURIComponent(name);
value=encodeURIComponent(value);
pairs.push(name+'='+value);
  }
returnpairs.join('&');
}
// 创 Ajax 请求对象,兼容ie8,ie9functionXHR(){
varxObj;
if (window.XMLHttpRequest) {
xObj=newXMLHttpRequest();
   } elseif (window.ActiveXObjext) {
xObj=newActiveXObject();
   }
returnxObj;
}
// get封装functionget(url,header,options,callback){
varxhr=XHR();
xhr.onload=function(){
callback(xhr.responseText);
  }
xhr.onerror=function(callback){
callback(xhr.status);
  }
url=url+'?'+serialize(options);
xhr.open('get',url,true);
for(variinheader){
xhr.setRequestHeader(i,header[i]);
  }
xhr.send(null);
}
// get请求startvarmethod='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封装functionpost(url,header,options,callback){
varxhr=createAjax();
xhr.onload=function(){
callback(xhr.responseText);
  };
xhr.onerror=function(callback){
console.log(xhr.status);
  };
xhr.open('post', url, true);
for(variinheader){
xhr.setRequestHeader(i,header[i]);
  }
xhr.send(serialize(data));
}
varmethod='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 封装

// 序列化参数functionserialize(data){
if(!data) return'';
varpairs= [];
for(varnameindata){
if(!data.hasOwnProperty(name)) continue;
if(typeofdata[name] ==='function') continue;
varvalue=data[name].toString();
name=encodeURIComponent(name);
value=encodeURIComponent(value);
pairs.push(name+'='+value);
  }
returnpairs.join('&');
}
// 创 Ajax 请求对象,兼容ie8,ie9functionXHR(){
varxObj;
if (window.XMLHttpRequest) {
xObj=newXMLHttpRequest();
   } elseif (window.ActiveXObjext) {
xObj=newActiveXObject();
   }
returnxObj;
}
// get封装functionajax(url, data, method='GET', responseType='json', header){
returnnewPromise((resolve,reject)=>{
varxhr=XHR();
varparams=nullxhr.onreadystatechange=handler; // 请求状态变化时的回调处理函数if(method.toUpperCase() ==='GET'){
url=url+'?'+serialize(data);
    }elseif(method,toUpperCase() ==='POST'){
params=serialize(data)
    }
xhr.open(method,url,true);
for(variinheader){
xhr.setRequestHeader(i,header[i]);
    }
!xhr['Content-Type'] && (xhr['Content-Type'] ='application/json')
xhr.responseType=responseTypexhr.send(params);
functionhandler(){
if(this.readyState!==4){
return ;
      }
if(this.status===200){
resolve(this.response)
      }else {
reject(newError(this.statusText));
      }
    }
  })
}
// get请求startvarmethod='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)
})


目录
相关文章
|
2月前
|
前端开发
用Promise对象实现的 Ajax
用Promise对象实现的 Ajax
19 0
|
2月前
|
前端开发
AJAX发送请求方法封装和请求函数底层刨析以及axios二次封装
AJAX发送请求方法封装和请求函数底层刨析以及axios二次封装
|
2月前
|
存储 前端开发
PROMISE解决AJAX中的串行和并行
PROMISE解决AJAX中的串行和并行
35 0
|
2月前
|
前端开发 Java
Promise--代码实现-- ajax 传统方式和 promise 方式和 promise 代码优化/重排 方式的对比--综合代码示例
Promise--代码实现-- ajax 传统方式和 promise 方式和 promise 代码优化/重排 方式的对比--综合代码示例
41 0
|
2月前
|
前端开发 API
用promise封装ajax
用promise封装ajax
31 0
|
8月前
|
前端开发 JavaScript API
Promise封装Ajax请求
Promise封装Ajax请求
35 0
|
8月前
|
XML 前端开发 JavaScript
什么是Ajax和jquery
什么是Ajax和jquery
66 0
|
2月前
|
JSON 前端开发 Java
利用Spring Boot处理JSON数据实战(包括jQuery,html,ajax)附源码 超详细
利用Spring Boot处理JSON数据实战(包括jQuery,html,ajax)附源码 超详细
81 0
|
2月前
|
敏捷开发 JavaScript 前端开发
❤❤❤【Vue.js最新版】sd.js基于jQuery Ajax最新原生完整版for凯哥API版本❤❤❤
❤❤❤【Vue.js最新版】sd.js基于jQuery Ajax最新原生完整版for凯哥API版本❤❤❤
|
2月前
|
前端开发 JavaScript
Jquery ajax捕获错误信息
Jquery ajax捕获错误信息
32 0