使用promise封装 原生ajax，$.ajax(),以及fetch？

封装原生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}