使用promise封装原生Ajax

function sendAjax(methd,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})
}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值