编写一个简易的 Axios 函数

编写一个简易的 Axios 函数:从零开始创建你自己的网络请求工具

当我们开始构建自己的网络请求工具时,不禁思考着:在现代的网络开发中,Axios等工具库如此受欢迎,其背后的原理是什么?这篇文章将带你踏上一个旅程,逐步构建一个简单但功能强大的 Axios 类型函数。

预备知识

在开始之前,让我们回顾一下基础知识。我们将使用原生 JavaScript 来实现这个功能,因此了解 XMLHttpRequest 对象以及 Promises 如何工作将会非常有帮助。

设定目标

我们的目标是构建一个名为 myAxios 的函数。这个函数将接收一个配置对象,并返回一个 Promise 对象,使得我们可以优雅地处理异步网络请求。

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函数,获取省份列表展示
    */
    // 1. 定义myAxios函数,接收配置对象,返回Promise对象
    function myAxios(config) {
      return new Promise((resolve, reject) => {
        // 2. 发起XHR请求,默认请求方法为GET
        const xhr = new XMLHttpRequest()
        xhr.open(config.method || 'GET', config.url)
        xhr.addEventListener('loadend', () => {
          // 3. 调用成功/失败的处理程序
          if (xhr.status >= 200 && xhr.status < 300) {
            resolve(JSON.parse(xhr.response))
          } else {
            reject(new Error(xhr.response))
          }
        })
        xhr.send()
      })
    }

    // 4. 使用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.log(error)
      document.querySelector('.my-p').innerHTML = error.message
    })
  </script>
</body>

</html>
相关推荐
杨进军19 分钟前
React 创建根节点 createRoot
前端·react.js·前端框架
ModyQyW34 分钟前
用 AI 驱动 wot-design-uni 开发小程序
前端·uni-app
说码解字40 分钟前
Kotlin lazy 委托的底层实现原理
前端
爱分享的程序员1 小时前
前端面试专栏-算法篇:18. 查找算法(二分查找、哈希查找)
前端·javascript·node.js
翻滚吧键盘1 小时前
vue 条件渲染(v-if v-else-if v-else v-show)
前端·javascript·vue.js
vim怎么退出1 小时前
万字长文带你了解微前端架构
前端·微服务·前端框架
你这个年龄怎么睡得着的1 小时前
为什么 JavaScript 中 'str' 不是对象,却能调用方法?
前端·javascript·面试
Java水解1 小时前
前端常用单位em/px/rem/vh/vm到底有什么区别?
前端
CAD老兵2 小时前
Vite 如何借助 esbuild 实现极速 Dev Server 体验,并支持无 source map 的源码调试
前端
南屿im2 小时前
JavaScript 手写实现防抖与节流:优化高频事件处理的利器
前端·javascript