目录
在这个示例中，我们展示了如何封装一个简易的 myAxios 函数，用来发起带查询参数的 HTTP 请求，并获取相应的数据。与常规的 XMLHttpRequest 使用方式相比，这个封装函数使得我们可以更方便地发送带查询参数的请求，类似于 axios 的请求方式。
功能概述：
- 封装
myAxios函数：这个函数接受一个配置对象（config），通过XMLHttpRequest发起异步请求。 - 携带查询参数：如果传入的配置对象中包含
params字段，myAxios会将其转化为 URL 查询字符串（使用URLSearchParams），并附加到 URL 后面。 - 请求和响应处理：函数返回一个 Promise。请求成功时，解析响应数据并调用
resolve，请求失败时，调用reject，并传递错误信息。
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>
<p class="my-p"></p>
<script>
/**
* 目标：封装_简易axios函数_获取地区列表
* 1. 判断有params选项，携带查询参数
* 2. 使用URLSearchParams转换，并携带到url上
* 3. 使用myAxios函数，获取地区列表
*/
function myAxios(config){
return new Promise((resolve,reject) => {
const xhr = new XMLHttpRequest()
if(config.params){
const paramsObj = new URLSearchParams(config.params)
const queryString = paramsObj.toString()
config.url += `?${queryString}`
}
xhr.open(config.method || 'GET',config.url)
xhr.addEventListener('loadend', () => {
if(xhr.status === 200){
resolve(JSON.parse(xhr.response))
}else{
reject(new Error(xhr.response))
}
})
xhr.send()
})
}
myAxios({
url:'http://hmajax.itheima.net/api/area',
params:{
pname:'广东省',
cname:'广州市'
}
}).then(result =>{
console.log(result);
document.querySelector('.my-p').innerHTML = result.list.join('<br>')
}).catch(error => {
console.dir(error);
document.querySelector('.my-p').innerHTML = error.message
})
</script>
</body>
</html>
代码解析：
- 封装
myAxios函数：- 创建一个
Promise对象，发送请求时使用XMLHttpRequest。 - 如果配置对象
params存在，它会被转化为 URL 查询字符串，并附加到 URL 后面。 - 发送请求后，若状态码为 200，解析并返回响应数据；若请求失败，返回错误信息。
- 创建一个
- 发送请求并处理数据：
- 调用
myAxios函数时，传递一个配置对象，其中url指定请求的 API 地址，params包含请求的查询参数（如pname和cname）。 - 请求成功后，页面会显示返回的地区列表；如果请求失败，页面会显示错误信息。
- 调用
程序运行结果：
当运行该代码时，浏览器会发起一个请求，向 http://hmajax.itheima.net/api/area 发送带有查询参数（pname=广东省 和 cname=广州市）的 GET 请求。如果请求成功，返回的数据会通过 resolve 解析，并将返回的地区列表显示在网页上。如果请求失败，网页会显示错误信息，通常会包含 HTTP 错误或请求失败的详细信息。
例如，当查询成功时，页面上会显示类似以下的省市地区列表：
天河区
越秀区
海珠区
荔湾区
如果请求失败，页面会显示如下错误信息：
模拟AJAX请求-失败