需求如下:原生ajax写起来太麻烦了,我们想用下面的写法发送ajax,如何做呢?一起来看看!
/**
* 发送get请求
* 参数是一个对象
* 对象中url是请求路径 必传项
* 对象中method是请求方式 get和post 可不传默认get
* 对象中data是请求携带的数据 必传项,且必须是对象
* 对象中headers是请求形式 formdata或json post请求可不传默认formdata
**/
sealAjax({
url: '/login',
methed: 'post',
data: {username: 'xxx', password: 111111},
headers: 'json',
}).then(data => {
console.log('成功', data)
}).catch(err => {
console.log("失败", err)
})
很简单,基于promise简单封装一下即可
function sealAjax(obj){
// 首先将传入的数据接过来
let data = obj.data
let url = obj.url
let methed = obj.methed || 'get' // 不传默认发送get请求
let headers = obj.headers || 'formdata' // 默认以表单形式发送
// 定义query变量存储query字符串,主要用于get请求
let query = ''
if (data) {
for (var i in data) {
query += i + '=' + data[i] + '&'
}
query = query.slice(0, -1) // query结果 username=xxx&password=111111
}
// 下面就是元生ajax写法
let xhr = null;
// 使用能力检测
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest()
} else if (window.ActiveXObject) {
xhr = new ActiveXObject('Microsoft.XMLHttp')
} else {
throw new Error('您的浏览器不支持ajax, 请升级')
}
// 最后返回一个promise对象
return new Promise((resolve, reject) => {
// 调用open, 用了个三元表达,如果methed是post请求就用url,否则用url和query字符串拼接
xhr.open(methed, methed === 'post' ? url : url + '?' + query, true)
// 监听事件
xhr.onreadystatechange = function() {
// 判断xhr的状态码
if (xhr.readyState === 4 ) {
if (xhr.status === 200) {
// 成功时 接收返回的内容
resolve(xhr.responseText)
} else {
// 失败时 接收返回的内容
reject(xhr.responseText)
}
}
}
// 设置响应头模拟为表单数据,如果传进来的是json,请求头类型就设置json,发送json字符串
// 如果传进来的是formdata,请求头类型就设置formdata,发送query字符串
if (headers.toLowerCase() === 'json') {
xhr.setRequestHeader('content-type', 'application/json;charset=utf-8')
xhr.send(JSON.stringify(data))
} else if (headers.toLowerCase() === 'formdata') {
xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded;charset=utf-8')
xhr.send(query)
}
})
}
到此Ajax就封装完成了,使用第一段代码调用即可。不清楚的可以留言!
联系客服