一、promise封装 原生ajax
1.原生封装
function fetch(url){
return new Promise((res,rej)=>{
let xhr=new XMLHttpRequest();
xhr.open('GET',url);
xhr.onreadystatechange=function(){
if(xhr.readyState==4&&xhr.status==200){
res(xhr.responseText)
}else{
rej(xhr)
}
}
xhr.send()
})
}
2.请求数据
fetch(url).then((val)=>{console.log(val)},(err)=>{console.log(err)})
.catch((err)=>{console.log(err)})
二、promise封装 JQ ajax
1.JQ封装
function fetch(url){
return new Promise((res,rej)=>{
$.ajax({
url: url,
type:"GET",
async:true,
dataType:"json",
timeout: 4000,
success: function(data){
res(data);
},
error: function(XMLHttpRequest){
rej(XMLHttpRequest);
},
complete:function (XMLHttpRequest) {
rej(XMLHttpRequest);
}
});
})
}
2.请求数据
fetch(url).then((val)=>{console.log(val)},(err)=>{console.log(err)})
.catch((err)=>{console.log(err)})
三、fetch
Fetch API 提供了一个 JavaScript 接口,用于访问和操纵 HTTP 管道的一些具体部分,例如请求和响应。它还提供了一个全局
fetch() 方法,该方法提供了一种简单,合理的方式来跨网络异步获取资源。 这种功能以前是使用 XMLHttpRequest
实现的。Fetch 提供了一个更理想的替代方案,可以很容易地被其他技术使用
1.fetch请求数据
fetch(url, {
// get 请求可以省略不写 默认的是GET
method: 'get'
})
.then(function(data) {
return data.text();
}).then(function(data) {
console.log(data)
});
2.Response对象
fetch的then中返回的不是一个字面量对象,而是一个Response对象的实例,返回的实例可用以下方法,分别处理数据
arrayBuffer() 获取ArrayBuffer格式的promise对象
blob() 获取Bolb格式的promise对象
json() -获取字符串对象
text()获取json的promise对象
formData() 获取formData格式的promise对象
详见fetch文档
总结
不管是原生封装还是JQ封装都给我们提供了一个更简单方便的方法来请求数据,而fetch则不需要封装操作起来也比ajax更加简单。