用XHR简单封装一个axios

时间：2022-03-01 06:22:38

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>XHR</title>
  </head>
  <body>
    <div>
      <button onclick="testGet()">GET请求</button>
      <button onclick="testPost()">POST请求</button>
      <button onclick="testPut()">PUT请求</button>
      <button onclick="testDelete()">DELETE请求</button>
    </div>

    <script>
      function testGet() {
        axios({
          url: "http://localhost:3000/posts",
          params: {
            id: 1
          }
        }).then(
          response => {
            console.log(response);
          },
          error => {
            console.log(error.message);
          }
        );
      }

      function testPost() {
        axios({
          url: "http://localhost:3000/posts",
          method: "POST",
          data: {
            title: "--POST添加上去的",
            author: "--POST添加---",
            id: 4
          }
        }).then(
          response => {
            console.log(response);
          },
          error => {
            console.log(error.message);
          }
        );
      }

      // axios 简单封装
      function axios({ url, method = "GET", params = {}, data = {} }) {
        // 返回一个promise对象
        return new Promise((resolve, reject) => {

          // 处理metho(转大写)
          method = method.toUpperCase()
// 处理query参数(拼接到url上) id=1&aaa=ccc
          /*{
              id: 1,
              aaa: ccc
            }*/
          let queryString = "";
          Object.keys(params).forEach(key => {
            queryString  = `${key}=${params[key]}&`;
          });
// 判断queryString有没有值
          if (queryString) {
            // 去除最后的&
            queryString = queryString.substring(0, queryString.length - 1);
            // 接到url上
            url  = "?"   queryString;
          }
          console.log(queryString);
// 1.执行异步ajax请求
          // 创建xhr对象
          const request = new XMLHttpRequest();

          // 打开链接(初始化请求，没有请求)
          request.open(method, url, true);
          // 发送请求
          if (method === "GET") {
            request.send();
          } else if (method === "POST") {
            request.setRequestHeader(
              "Content-Type",
              "application/json;charset=utf-8"
            ); // 告诉服务器请求体的格式是JSON格式
            request.send(JSON.stringify(data)); // 发送JSON格式的请求体参数
          }

          //绑定状态改变的监听
          request.onreadystatechange = function() {
            // 如果请求没有完成，直接结束
            if (request.readyState !== 4) {
              return;
            }
            // 如果响应状态码在[200,300)之间表示请求成功，否则失败
            const { status, statusText } = request;
            if (status >= 200 && status < 300) {
              // 准备结果数据对象response
              const response = {
                data: JSON.parse(request.response),
                status,
                statusText
              };
              // 2.1如果请求成功了，调用resolve()
              resolve(response);
            } else {
              // 2.2如果请求失败，调用reject()
              reject(new Error("request error status is "   status));
            }
          };
        });
      }
    </script>
  </body>
</html>

相关文章