简易版axios实现-基于promise+XMLHttpRequest
/**
* 目标：封装_简易axios函数_获取省份列表
* 1. 定义myAxios函数，接收配置对象，返回Promise对象
* 2. 发起XHR请求，默认请求方法为GET
* 3. 调用成功/失败的处理程序
* 4. 使用myAxios函数，获取省份列表展示
*/
function myAxios(config) {
return new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest()
// 查询参数支持
if (config.params) {
config.url += `?${new URLSearchParams(config.params).toString()}`
}
xhr.open(config.method || "GET", config.url)
xhr.addEventListener("loadend", () => {
if (xhr.status >= 200 && xhr.status < 300) {
resolve(JSON.parse(xhr.response))
} else {
reject(new Error(xhr.response))
}
})
// 请求体参数支持
if (config.data) {
xhr.setRequestHeader("Content-Type", "application/json")
xhr.send(JSON.stringify(config.data))
} else {
xhr.send()
}
})
}
myAxios({
url: "https://ajax.itheima.net/api/register",
method: "post",
data: {
username: "mayanan04",
password: "123456"
}
}).then(ret => {
document.querySelector("p").innerHTML = ret.message
}).catch(err => {
document.querySelector("p").innerHTML = err.message
})