当前位置：首页 > article >正文

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

article 2025/2/25 16:13:40

关键步骤：

完整代码（html）：

代码解析：

程序运行结果：

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

关键步骤：

封装 myAxios 函数：
- myAxios 函数接收一个配置对象（如请求的 URL 和方法），并返回一个 Promise。
- Promise 在请求成功时解析数据，在请求失败时返回错误。
发起 HTTP 请求：
- 使用 XMLHttpRequest 发起请求，默认方法为 GET，通过 URL 获取数据。
- 在请求完成时，通过 loadend 事件处理响应，检查请求状态码，如果为 200，则解析响应内容，否则返回错误。
展示数据：
- 使用 then() 方法处理成功的情况，将返回的省份列表展示在网页上。
- 使用 catch() 捕获请求中的任何错误，并将错误信息展示在网页上。

完整代码（html）：

<!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. 定义myAxios函数，接收配置对象，返回Promise对象
     *  2. 发起XHR请求，默认请求方法为GET
     *  3. 调用成功/失败的处理程序
     *  4. 使用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){
          resolve(JSON.parse(xhr.response))  // 请求成功，返回响应数据
        }else{
          reject(new Error(xhr.response))   // 请求失败，返回错误信息
        }
      })
      xhr.send()   // 发送请求
    })
   }

   // 调用myAxios函数获取省份列表
   myAxios({
    url:'http://hmajax.itheima.net/api/province'
   }).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 函数：
- myAxios 使用 XMLHttpRequest 发起网络请求。接收一个配置对象（包含 URL 和请求方法），并返回一个 Promise 对象。
- 请求完成时，通过 xhr.addEventListener('loadend', ...) 来监听请求状态。如果请求成功，解析响应并返回数据。如果失败，返回错误信息。
请求成功的处理：
- 在 then() 方法中处理请求成功的结果。这里，我们将服务器返回的省份列表（result.list）通过 <br> 分隔符展示到网页的 <p class="my-p"></p> 标签中。
请求失败的处理：
- 在 catch() 方法中处理错误，若请求失败，捕获错误并将错误信息展示在页面中。

程序运行结果：

请求成功：如果服务器成功返回省份列表数据（例如 { "list": ["广东省", "北京市", "浙江省", "江苏省"] }），页面将会展示这些省份名称：
```
广东省
北京市
浙江省
江苏省
```
请求失败：如果请求因某种原因失败（例如服务器不可用、请求出错等），页面将会显示错误信息，例如：
```
模拟AJAX请求-失败
```
错误信息将被显示在页面上，并且开发者可以通过浏览器的开发者工具查看详细的错误信息。

查看全文

http://www.kler.cn/a/548861.html