目录
这个示例展示了如何封装一个简易的 axios 函数来注册用户。它使用 XMLHttpRequest 实现 AJAX 请求，并且支持发送带有请求体的数据。具体步骤如下：
封装
myAxios函数：
myAxios是一个封装的函数，使用XMLHttpRequest发起请求。如果请求配置中包含data，它会将数据转换为 JSON 字符串并设置请求头为Content-Type: application/json，然后通过xhr.send()发送数据。如果没有数据，直接发送空请求。注册用户：
当点击页面上的 "注册用户" 按钮时，myAxios函数会发起一个POST请求，发送用户的username和password到服务器的注册接口。请求成功与失败处理：
如果注册成功（HTTP 状态码 2xx），会显示 "注册成功"。如果账号已经被占用或请求失败，会显示错误信息，如 "账号已被占用"。
代码：
以下是 HTML 和 JavaScript 完整代码，包含一个简单的用户注册功能。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>封装_简易axios函数_注册用户</title>
</head>
<body>
<h1 class="my-h"></h1>
<button class="reg-btn">注册用户</button>
<script>
/**
* 目标：封装_简易axios函数_注册用户
* 1. 判断有data选项，携带请求体
* 2. 转换数据类型，在send中发送
* 3. 使用myAxios函数，完成注册用户
*/
function myAxios(config) {
return new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest()
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){
const jsonStr = JSON.stringify(config.data)
xhr.setRequestHeader('Content-Type','application/json')
xhr.send(jsonStr)
}else{
xhr.send()
}
})
}
document.querySelector('.reg-btn').addEventListener('click', () => {
myAxios({
url:'http://hmajax.itheima.net/api/register',
method:'POST',
data:{
username:'xiaoning2',
password:'123456'
}
}).then(result => {
console.log(result);
document.querySelector('.my-h').innerHTML = '注册成功'
}).catch(error => {
console.dir(error);
document.querySelector('.my-h').innerHTML = '账号已被占用'
})
})
</script>
</body>
</html>
程序运行结果：
注册成功：
如果请求成功（即账号没有被占用），页面会显示 "注册成功"。注册失败：
如果请求失败，可能是因为账号已经被占用，页面会显示 "账号已被占用"。控制台输出：
如果请求成功，控制台会输出注册接口的响应结果。如果失败，则会输出错误信息，便于调试。
学习要点：
- 封装
XMLHttpRequest：本例通过封装XMLHttpRequest实现了类似axios的功能，适合初学者学习如何处理 AJAX 请求。 - 异步请求与错误处理：展示了如何使用
Promise来处理异步操作，并且使用then和catch分别处理成功和失败的结果。