详细介绍:封装简易的 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请求-失败

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

相关推荐
jingling5558 分钟前
解决微信小程序真机调试中访问本地接口 localhost:8080 报错
前端·微信小程序·小程序
en-route9 分钟前
使用 Flask 构建 Web 应用:静态页面与动态 API 访问
前端·python·flask
IT_陈寒10 分钟前
Vite 5年迭代揭秘:3个核心优化让你的项目构建速度提升200%
前端·人工智能·后端
怎么吃不饱捏26 分钟前
vue3+vite,引入阿里巴巴svg图标,自定义大小颜色
前端·javascript·vue.js
无敌最俊朗@27 分钟前
MQTT 关键特性详解
java·前端·物联网
JAVA学习通28 分钟前
微服务项目->在线oj系统(Java-Spring)----[前端]
java·开发语言·前端
excel32 分钟前
Vue3 响应式系统核心执行器:Reactive Effect 与依赖调度机制
前端
南玖i2 小时前
vue3 通过 Vue3DraggableResizable实现拖拽弹窗,可修改大小
前端·javascript·vue.js
excel3 小时前
Web发展与Vue.js导读
前端
YAY_tyy3 小时前
Three.js 开发实战教程(五):外部 3D 模型加载与优化实战
前端·javascript·3d·three.js