封装原生ajax
function sendAjax(method,url,data){
return new Promise(resolve,reject) => {
//1.创建xhr对象
let xhr = new XMLHttpRequest()
//2.绑定监听
xhr.onreadystatechange = function(){
if(xhr.readyState !== 4){
return
}
if(xhr.readystate === 4 && (xhr.status >= 200 && xhr.status <= 299)){
const responseObj = {
data:xhr.response,
status:xhr.status,
statusText:xhr.statusText
}
resolve(responseObj)
}else{
reject(new Error('请求出错了'));
}
//3.设置请求的方式,地址,传递的参数
let dataKeys = object.keys(data)
//4.将传递过来的数据对象,加工成urlencode对象的编码
let str = datakeys.reducer(function(pre,now){
return pre += `${now}=${data[now]}&`
},'')
//5.发送请求
if(method.toLowerCase() === 'get'){
url += `?${str}`
xhr.open(method,url)
xhr.send()
}else if (method.toLowerCase()==='post'){
xhr.open(method,url)
xhr.setRequestheader('content-type','application/x-www-form-urlencoded')
xhr.send(str)
}
})
}
}
发送ajax(测试)
sendAjax(‘get’,‘http://localhost:3000/test_get’,{m:1,n:2})then(data => console.log(data)).catch(err => console.log(err))
第二次发送,需要携带第一次的数据
async () => {
let {data} = await sendAjax(‘GET’,‘http://localhost:3000/test_get,{m:1,n:2}’)
let {data2} = await sendAjax(‘GET’,‘http://localhost:3000/test_get’,{data})
}
封装 $.ajax
function sendAjax(method,url,data){
// 新建promise对象并返回
return new Promise(resolve,reject) => {
// 创建 $.ajax 请求
let obj = {
url: url,
method:method,
dataType:'json',
success(returnData) {
resolve(returnData);
},
error(error){
reject(error);
}
}
if (body == true) {
aj.contentType = "application/json";
if (params) {
aj.data = JSON.stringify(params);
}
} else {
if (params) {
aj.data = params;
}
}
$.ajax(aj);
}
}
// 封装请求的方法 挂载在window上
window.$ajax = {
get(url,params){
return request(url,'GET',params);
},
post(url,params,body=true){
return request(url,'POST',params,body);
},
put(url,params,body=true){
return request(url,'PUT',params,body);
},
delete(url,params,body=true){
return request(url,'DELETE',params,body);
}
}
})(jQuery);
let api = '请求地址';
//查询
let params = {
name:"张三",
age:21
};
$ajax.get(api,params).then(returnData => {
console.log(returnData);
}).catch(error => {
console.log(error);
})
封装fetch
// 设置请求头
const headers = new Headers({
'Accept': 'application/json',
'Content-Type': 'application/json'
});
// 封装各类请求方法并传递参数url
function get (url) {
return fetch(url, {
method: 'GET',
headers: headers
}).then(response => {
return handleResponse(url, response);
}).catch(err => {
console.error(`Request failed. Url = ${url} . Message = ${err}`);
return {error: {message: 'Request failed.'}};
})
}
function post (url, data) {
return fetch(url, {
method: 'POST',
headers: headers,
body: JSON.stringify(data)
}).then(response => {
return handleResponse(url, response);
}).catch(err => {
console.error(`Request failed. Url = ${url} . Message = ${err}`);
return {error: {message: 'Request failed.'}};
})
}
function put (url, data) {
return fetch(url, {
method: 'PUT',
headers: headers,
body: JSON.stringify(data)
}).then(response => {
return handleResponse(url, response);
}).catch(err => {
console.error(`Request failed. Url = ${url} . Message = ${err}`);
return {error: {message: 'Request failed.'}};
})
}
// 返回成功的参数或失败的信息
function handleResponse (url, response) {
if (response.status < 500) {
return response.json();
} else {
console.error(`Request failed. Url = ${url} . Message = ${response.statusText}`);
return {error: {message: 'Request failed due to server error '}};
}
}
// 导出各类方法
export {get, post, put}