结合promise封装原生ajax

<!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>Document</title>
</head>

<body>
  <button id="btn">发送请求</button>

  <script>
    /*
      Ajax 用于与服务器的连接、
      可让页面在不刷新的情况下，实现局部更新
    */
    /*
      @url: 请求地址
      @method: 请求方式
      @data: 作为请求主体被发送的数据
      @params: 与请求一起发送的 URL 参数
    */
    function ajax({ url, method = 'get', data, params}) {
      return new Promise((resolve, reject) => {
        // 处理数据的方法
        const formatData = (data) => {
          let arr = [];
          for (let key in data) {
            // data[key]
            // data.b
            arr.push(`${key}=${data[key]}`)
          }
          return arr.join('&')
        }
        let newParams = formatData(params);
  
        // 1、创建实例化对象
        let xhr = new XMLHttpRequest();

        // 2、服务器连接
        if (method === 'get') {
          /*
            open的三个参数
            第一个：请求方式
            第二个：请求的URL
            第三个：是否开启异步
          */
          //  url?a=1&b=2
          xhr.open('get', `${url}?${newParams}`, true);
          // 3、发送请求
          xhr.send(null);
        } else if (method === 'post') {
          xhr.open('post', `${url}?${newParams}`, true);
          // 设置请求头
          xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
          // 3、发送请求
          const newData = formatData(data);
          xhr.send(newData);
        }

        // 4、接收数据
        xhr.onreadystatechange = function() {
          if (xhr.readyState === 4 && xhr.status === 200) {// 请求成功、响应成功
            // responseText 获取请求数据
            resolve(xhr.responseText)
          } else {
            reject(xhr.responseText)
          }
        }
      })
    }

    let dom = document.getElementById('btn');
    dom.onclick = () => {
      ajax({
        url: 'https://api.it120.cc/small4/shop/goods/category/all',
        method: 'post'
      }).then(res => {
        console.log(res, 'res')
      })
    }

  </script>
</body>

</html>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容