目录
功能概述：
HTML 和 JavaScript 代码：
代码解析：
程序运行结果：
在这个示例中，我们展示了如何封装一个简易的 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请求-失败
