编写一个简易的 Axios 函数

76博682023-12-14 5:02

编写一个简易的 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>