基于 Promise 和 XHR 封装 myAxios 函数

xue0305

已于 2024-06-09 08:31:56 修改

阅读量386

点赞数 11

文章标签：前端 javascript 开发语言 ajax

于 2024-06-05 16:54:28 首次发布

本文链接：https://blog.csdn.net/xyymyy/article/details/139476096

版权

什么是Promise

封装

什么是Promise

Promise 对象用于表示一个异步操作的最终完成（或失败）及其结构值

好处：

逻辑更清晰（成功或失败会关联后续的处理函数）
了解 axios 函数内部运作的机制

封装

基于 Promise 和 XHR 封装 myAxios 函数，获取数据列表列表展示到页面

步骤：

1.定义 myAxios 函数，接收配置对象，返回 Promise 对象

2. 发起 XHR 请求，默认请求方法为 GET

3.调用成功/失败的处理程序

4.使用 myAxios 函数，获取列表展示

function myAxios(config) {
  return new Promise((resolve, reject) => {
    // XHR 请求
    // 调用成功/失败的处理程序
  })
}

myAxios({
  url: '目标资源地址'
}).then(result => {
    
}).catch(error => {
    
})

案例

封装一个函数获取省份列表

<!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. 判断有params选项，携带查询参数
     *  2. 使用URLSearchParams转换，并携带到url上
     *  3. 使用myAxios函数，获取地区列表
    */
    function myAxios(config) {
      return new Promise((resolve, reject) => {
        const xhr = new XMLHttpRequest()
        // 1. 判断有params选项，携带查询参数
        if (config.params) {
          // 2. 使用URLSearchParams转换，并携带到url上
          const paramsObj = new URLSearchParams(config.params)
          const queryString = paramsObj.toString()
          // 把查询参数字符串，拼接在url？后面
          config.url += `?${queryString}`
        }

        xhr.open(config.method || 'GET', config.url)
        xhr.addEventListener('loadend', () => {
          if (xhr.status >= 200 && xhr.status < 300) {
            resolve(JSON.parse(xhr.response))
          } else {
            reject(new Error(xhr.response))
          }
        })
         // 1. 判断有data选项，携带请求体
        if (config.data) {
          // 2. 转换数据类型，在send中发送
          const jsonStr = JSON.stringify(config.data)
          xhr.setRequestHeader('Content-Type', 'application/json')
          xhr.send(jsonStr)
        } else {
          // 如果没有请求体数据，正常的发起请求
          xhr.send()
        }
      })
    }

    // 3. 使用myAxios函数，获取地区列表
    myAxios({
      url: 'http://hmajax.itheima.net/api/area',
      params: {
        pname: '辽宁省',
        cname: '大连市'
      }
    }).then(result => {
      console.log(result)
      document.querySelector('.my-p').innerHTML = result.list.join('<br>')
    })

  </script>
</body>

</html>