用XHR简单封装一个axios

<!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>
posted @ 2019-12-15 15:16  林中有风  阅读(392)  评论(0编辑  收藏  举报