使用Promise封装的AJAX请求
// Promise 封装 ajax
function p(method="GET", url, data=null){
return new Promise((resolve, reject) => {
var xhr = new XMLHttpRequest();
xhr.open(method, url, true);
xhr.onreadystatechange = function() {
if(xhr.status === 200 && xhr.readyState === 4){
resolve(xhr.responseText);
} else {
reject(xhr.responseText);
}
}
xhr.send(data);
})
}
// 使用
p("GET", "请求地址", data)
.then(res => {
console.log(res);
return request('请求地址2')
}).then((res)=>{
console.log(res);
})
使用Promise封装的$.ajax请求
// url 接口地址 type请求的类型 data数据(不写的话 返回的请求数据)
function p(url, type="GET", data=null) {
// resolve 成功的参数 reject 失败的参数
return new Promise((resolve, reject) => {
$.ajax({
url, type, data,
success(res) {
resolve(res)
},
error(res) {
reject(res)
}
})
})
}
// 使用
p('请求地址1',"GET",data).then((res) => {
console.log(res)
return request('请求地址2')
}).then((res) => {
console.log(res)
})
使用Promise封装的fetch请求
/**
* 封装fetch
* 更快,更简单的请求数据
*
* @version 1.0.0
* @author 米斯特吴
* @license MIT
*
**/
// console.log(EasyHttp);
class EasyHttp {
// get
get(url) {
return new Promise((resolve, reject) => {
fetch(url)
.then(res => res.json())
.then(data => resolve(data))
.catch(err => reject(err))
})
}
// post
post(url, data) {
return new Promise((resolve, reject) => {
fetch(url, {
method: "POST",
headers: {
'Content-type': 'application/json'
},
body: JSON.stringify(data)
})
.then(res => res.json())
.then(data => resolve(data))
.catch(err => reject(err))
})
}
// put
put(url, data) {
return new Promise((resolve, reject) => {
fetch(url, {
method: "PUT",
headers: {
'Content-type': 'application/json'
},
body: JSON.stringify(data)
})
.then(res => res.json())
.then(data => resolve(data))
.catch(err => reject(err))
})
}
// delete
delete(url) {
return new Promise((resolve, reject) => {
fetch(url, {
method: "DELETE",
headers: {
'Content-type': 'application/json'
}
})
.then(res => res.json())
.then(data => resolve('数据删除成功!'))
.catch(err => reject(err))
})
}
}
/**
* 封装fetch
* 更快,更简单的请求数据
*
* @version 2.0.0
* @author 米斯特吴
* @license MIT
*
**/
class EasyHttp {
// get
async get(url) {
const response = await fetch(url);
const resData = await response.json();
return resData;
}
// post
async post(url, data) {
const response = await fetch(url, {
method: "POST",
headers: {
'Content-type': 'application/json'
},
body: JSON.stringify(data)
});
const resData = await response.json();
return resData;
}
// put
async put(url, data) {
const response = await fetch(url, {
method: "PUT",
headers: {
'Content-type': 'application/json'
},
body: JSON.stringify(data)
});
const resData = await response.json();
return resData;
}
// delete
async delete(url) {
const response = await fetch(url, {
method: "DELETE",
headers: {
'Content-type': 'application/json'
}
})
const resData = await "数据删除成功!";
return resData;
}
}