编写一个简易的 Axios 函数：从零开始创建你自己的网络请求工具
当我们开始构建自己的网络请求工具时，不禁思考着：在现代的网络开发中，Axios等工具库如此受欢迎，其背后的原理是什么？这篇文章将带你踏上一个旅程，逐步构建一个简单但功能强大的 Axios 类型函数。
预备知识
在开始之前，让我们回顾一下基础知识。我们将使用原生 JavaScript 来实现这个功能，因此了解 XMLHttpRequest 对象以及 Promises 如何工作将会非常有帮助。
设定目标
我们的目标是构建一个名为 myAxios 的函数。这个函数将接收一个配置对象，并返回一个 Promise 对象，使得我们可以优雅地处理异步网络请求。
<!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>
