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

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

相关推荐
sen_shan21 分钟前
Vue3+Vite+TypeScript+Element Plus开发-04.静态菜单设计
前端·javascript·typescript·vue3·element·element plus·vue 动态菜单
旧识君1 小时前
移动端1px终极解决方案:Sass混合宏工程化实践
开发语言·前端·javascript·前端框架·less·sass·scss
ElasticPDF-新国产PDF编辑器1 小时前
Angular use pdf.js and Elasticpdf tutorial
javascript·pdf·angular.js
吃没吃1 小时前
vue2.6-源码学习-Vue 核心入口文件分析
前端
Carlos_sam1 小时前
Openlayers:海量图形渲染之图片渲染
前端·javascript
XH2761 小时前
Android Retrofit用法详解
前端
鸭梨大大大1 小时前
Spring Web MVC入门
前端·spring·mvc
你的人类朋友1 小时前
MQTT协议是用来做什么的?此协议常用的概念有哪些?
javascript·后端·node.js
吃没吃1 小时前
vue2.6-源码学习-Vue 初始化流程分析 (src/core/instance/init.js)
前端
XH2761 小时前
Android Room用法详解
前端