目录
详细介绍：
代码：
程序运行结果：
学习要点：
这个示例展示了如何封装一个简易的 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分别处理成功和失败的结果。