首先先讲一下我们需要用到的XMLHttpRequest,他是浏览器内置的一个构造函数
axios 中的 axios.get()、axios.post()、axios() 方法,都是基于 XMLHttpRequest(简称:XHR) 封装出来的
使用XMLHttpRequest发起请求四部曲
1 创建异步xhr对象
2 调用xhr.open()函数
3 调用xhr.send()函数
4 监听load事件
接下来我们可以使用以上方法封装一个函数
function myaxios(target) {
// 用容器承载客户带来的数据
method = target.method//方法
url = target.url
data = target.data
parmas = target.parmas
// 函数
finish = target.finish
// 创建异步对象
** let xhr = new XMLHttpRequest()**
// 2.发起请求
// 2.1设置请求行
// 开始之前,都先要得到url地址以及方法
// get请求自带参数/get不带参数/get带参数但需要我们接(我们需要考虑这几种情况)
if (method.toLowerCase('get') && parmas) {
//如果get请求带参数,只能接到url的后面...
url = url + '?' + Objtostring(parmas)
}
// 请求行
** xhr.open(method, url)**
// 2.2设置请求头
// 请求头(get不需要请求头,而post需要根据情况来写)
// 一般post带参数,要么是formdata,要么是字符串,要么是对象,针对不同情况做判断
if (method.toLowerCase('post') && data) {
// 如果传入的是字符串
if (typeof data == 'string') {
**xhr.setRequestHeader**(
'Content-Type',
"application/x-www-form-urlencoded"
)
// 2.3请求体
** xhr.send(data)**
}
// 如果传入的是对象
else if (typeof data == 'object') {
xhr.setRequestHeader(
'Content-Type',
"application/JSON"
)
// 请求体(json对象转字符串)
xhr.send(JSON.stringify(data))
}
// 如果传入的是formdata
else {
//formdata不需要转,因为只要是formdata就会默认添加formdata:application/multipart-formdata
xhr.send(data)
}
}
//这个是get的↓
else {
xhr.send(data)
}
// 响应
xhr.addEventListener('load', function () {
let result = JSON.parse(xhr.response)
// 获得数据
// 得到数据,然后把数据返回给客户进行使用
finish(result)
})
}
// 如果带来的使用parmas承装的一个对象,我们需要把它解析成键值对到url后面↓
function Objtostring(obj) {
let arr = []
for (let key in obj) {
arr.push(`${key}=${obj[key]}`)
}
return arr.join('&') //要形成参数=参数值&参数=参数值这种形式
}