详细介绍：封装简易的 Axios 函数获取省份列表

目录

关键步骤：

完整代码（html）：

代码解析：

程序运行结果：

---

本示例展示了如何通过封装一个简易的 myAxios 函数来模拟 axios 的功能，使用原生的 XMLHttpRequest（XHR）对象来发起 HTTP 请求。我们将实现一个简单的功能，通过该封装函数从服务器获取省份列表数据，并在网页上显示这些省份。

关键步骤：

1. 封装 myAxios 函数：

   • myAxios 函数接收一个配置对象（如请求的 URL 和方法），并返回一个 Promise。
   • Promise 在请求成功时解析数据，在请求失败时返回错误。

2. 发起 HTTP 请求：

   • 使用 XMLHttpRequest 发起请求，默认方法为 GET，通过 URL 获取数据。
   • 在请求完成时，通过 loadend 事件处理响应，检查请求状态码，如果为 200，则解析响应内容，否则返回错误。

3. 展示数据：

   • 使用 then() 方法处理成功的情况，将返回的省份列表展示在网页上。
   • 使用 catch() 捕获请求中的任何错误，并将错误信息展示在网页上。

完整代码（html）：

代码解析：

1. myAxios 函数：

   • myAxios 使用 XMLHttpRequest 发起网络请求。接收一个配置对象（包含 URL 和请求方法），并返回一个 Promise 对象。
   • 请求完成时，通过 xhr.addEventListener('loadend', ...) 来监听请求状态。如果请求成功，解析响应并返回数据。如果失败，返回错误信息。

2. 请求成功的处理：

   • 在 then() 方法中处理请求成功的结果。这里，我们将服务器返回的省份列表（result.list）通过
分隔符展示到网页的
     标签中。

3. 请求失败的处理：

   • 在 catch() 方法中处理错误，若请求失败，捕获错误并将错误信息展示在页面中。

程序运行结果：

1. 请求成功：如果服务器成功返回省份列表数据（例如 { "list": ["广东省", "北京市", "浙江省", "江苏省"] }），页面将会展示这些省份名称：

   广东省
   北京市
   浙江省
   江苏省
   

2. 请求失败：如果请求因某种原因失败（例如服务器不可用、请求出错等），页面将会显示错误信息，例如：

   模拟AJAX请求-失败
   

   错误信息将被显示在页面上，并且开发者可以通过浏览器的开发者工具查看详细的错误信息。