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

目录

关键步骤:

完整代码(html):

代码解析:

程序运行结果:


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

关键步骤:
  1. 封装 myAxios 函数

    • myAxios 函数接收一个配置对象(如请求的 URL 和方法),并返回一个 Promise
    • Promise 在请求成功时解析数据,在请求失败时返回错误。
  2. 发起 HTTP 请求

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

    • 使用 then() 方法处理成功的情况,将返回的省份列表展示在网页上。
    • 使用 catch() 捕获请求中的任何错误,并将错误信息展示在网页上。
完整代码(html):
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>
代码解析:
  1. myAxios 函数

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

    • then() 方法中处理请求成功的结果。这里,我们将服务器返回的省份列表(result.list)通过 <br> 分隔符展示到网页的 <p class="my-p"></p> 标签中。
  3. 请求失败的处理

    • catch() 方法中处理错误,若请求失败,捕获错误并将错误信息展示在页面中。
程序运行结果:
  1. 请求成功 :如果服务器成功返回省份列表数据(例如 { "list": ["广东省", "北京市", "浙江省", "江苏省"] }),页面将会展示这些省份名称:

    bash 复制代码
    广东省
    北京市
    浙江省
    江苏省
  2. 请求失败:如果请求因某种原因失败(例如服务器不可用、请求出错等),页面将会显示错误信息,例如:

    bash 复制代码
    模拟AJAX请求-失败

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

相关推荐
王亭_66616 分钟前
VSCode集成deepseek使用介绍(Visual Studio Code)
ide·vscode·编辑器·deepseek·openrouter
anyup_前端梦工厂2 小时前
了解几个 HTML 标签属性,实现优化页面加载性能
前端·html
前端御书房2 小时前
前端PDF转图片技术调研实战指南:从踩坑到高可用方案的深度解析
前端·javascript
2301_789169542 小时前
angular中使用animation.css实现翻转展示卡片正反两面效果
前端·css·angular.js
爱健身的小范3 小时前
记录一下VScode可以使用nvcc编译,但VS不行的解决方案
ide·vscode·编辑器
翻滚吧键盘3 小时前
vscode复制到下一行
ide·vscode·编辑器
风口上的猪20153 小时前
thingboard告警信息格式美化
java·服务器·前端
程序员黄同学3 小时前
请谈谈 Vue 中的响应式原理,如何实现?
前端·javascript·vue.js
爱编程的小庄4 小时前
web网络安全:SQL 注入攻击
前端·sql·web安全
宁波阿成5 小时前
vue3里组件的v-model:value与v-model的区别
前端·javascript·vue.js