axios的底层实现及手动封装ajax居然这么简单？-CSDN博客

本文链接：https://blog.csdn.net/Zwwxd666/article/details/140135234

总结Promise

axios的底层实现异步promise操作+xmlhttpRequest

关键词promise对象处理异步操作

xhr发送请求

promise异步操作触发成功/失败回调函数更新状态为成功fulfilled还是rejected

根据状态触发then还是catch。

通俗点举个例子就是买了彩票，然后去菜市场买菜，其过程不会被阻塞，也就是不用一直在彩票店等到开奖才做其他事情，留下电话号码，也就是设置回调then还是catch，当中奖了（resolve）触发then回调，没中奖（reject）触发catch

代码+讲解（可直接复制使用）

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>

<body>
  <div class="province">

  </div>
  <script>


    // 内部创建promise对象，回调函数传入resolve和reject函数
    new Promise((resolve, reject) => {
      // 创建xhr对象，初始化请求方式，地址
      const xhr = new XMLHttpRequest()
      xhr.open('GET', 'http://hmajax.itheima.net/api/province324234')
      // 设置监听器监听请求的完成状态来触发回调
      xhr.addEventListener('loadend', () => {
        // 根据请求的状态码来决定调用resolve还是reject函数并传入该异步操作所携带的数据
        if (xhr.status >= 200 && xhr.status < 300) {
          // （resolve的数据通常将其转为js对象，后续then回调的时候可以获取该js对象内的属性值
          resolve(JSON.parse(xhr.response))
        }
        else {
          // 而reject的参数为new Error(errorMsg)对象）
          reject(new Error(xhr.response))
        }
      })
      xhr.send()
      // 调用回调resolve  OR  rejecte以此来更新promise的状态为
      // fulfilled已完成异步操作，
      // 还是rejected未完成异步操作，同时携带对应的数据给下一个回调
    }).then(
      // 给该promise对象设置监听器then和catch根据当前状态来触发then还是catch里的回调函数，
      // 形参res为resolve还是reject带过来的数据
      res => {
        console.log(res);
        document.querySelector('.province').innerHTML = res.list.join('<br>')
      }).catch(res => {
        // 取error对象的数据不能直接log打印，而是console.dir(error)详细打印，
        // 同时往标签里塞值innerHtml = error.message
        console.dir(res);
        document.querySelector('.province').innerHTML = res.message
      })

  </script>


  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</body>

</html>