原生axjax 和axio的结合使用

固定请求地址和方法

<body>
    <script>
      /*
        1. 新闻接口
          get http://ajax-api.itheima.net/api/news
          无参数
      */
      function myAxios() {
        return new Promise((resolve, reject) => {
          const xhr = new XMLHttpRequest();
          // 2.在请求行中设置请求的 地址 和方法
          xhr.open("get", "http://ajax-api.itheima.net/api/settings");
          // 3.注册回调函数 服务器响应内容回来之后触发
          xhr.addEventListener("load", function () {
            // response 响应
            console.log(xhr.response);
            resolve(JSON.parse(xhr.response)); //把响应回来的数据给到成功时调用的方法resolve
          });

          // 4.在请求体里面发送请求
          xhr.send();
        });
      }
      myAxios().then((res) => {
        console.log(res);
      });
    </script>

axios参数的提取

<body>
    <script>
      /*
        1. 新闻接口
          get http://ajax-api.itheima.net/api/news
          无参数
        参数是一个对象
          url 地址+get的参数(如果有的话)
          method 
          目前只考虑get
      */
      function myAxios(option) {
        return new Promise((resolve, reject) => {
          // method = "get" get可以默认不传
          const { method = "get", url } = option;
          const xhr = new XMLHttpRequest();
          // 2.在请求行中设置请求的 地址 和方法
          xhr.open(method, url);
          // 3.注册回调函数 服务器响应内容回来之后触发
          xhr.addEventListener("load", function () {
            // response 响应
            // console.log(xhr.response);
            resolve(JSON.parse(xhr.response)); //把响应回来的数据给到成功时调用的方法resolve
          });

          // 4.在请求体里面发送请求
          xhr.send();
        });
      }
      myAxios({
        method: "get",
        url: "http://ajax-api.itheima.net/api/settings",
      }).then((res) => {
        console.log(res);
      });
    </script>
  </body>

axios传递json给服务器

<body>
    <h2>axios传递json给服务器</h2>
    <button class="get">获取图书</button>
    <button class="add">新增图书</button>
    <button class="edit">修改图书</button>
    <button class="delete">删除图书</button>
    <script>
      /*
        参数是一个对象
          url 地址+get的参数(如果有的话)
          method
          data:{} 通过请求体传递的数据 写到这里.对象的格式
         
      */

      function myAxios(option) {
        return new Promise((resolve, reject) => {
          // method = "get" get可以默认不传
          const { method = "get", url, data } = option;
          const xhr = new XMLHttpRequest();
          // 2.在请求行中设置请求的 地址 和方法
          xhr.open(method, url);
          // 3.注册回调函数 服务器响应内容回来之后触发
          xhr.setRequestHeader("content-type", "application/json");
          xhr.addEventListener("load", function () {
            // response 响应
            // console.log(xhr.response);
            resolve(JSON.parse(xhr.response)); //把响应回来的数据给到成功时调用的方法resolve
          });

          // 4.在请求体里面发送请求
          xhr.send(JSON.stringify(data));
        });
      }
      myAxios({
        method: "post",
        url: "http://ajax-api.itheima.net/api/login",
        data: {
          username: "admin",
          password: "123456",
        },
      }).then((res) => {
        console.log(res);
      });
      //
      document.querySelector(".get").onclick = () => {
        myAxios({
          method: "get",
          url: "http://ajax-api.itheima.net/api/books",
        }).then((res) => {
          console.log(res);
        });
      };
      //
      document.querySelector(".add").onclick = () => {
        myAxios({
          method: "post",
          url: "http://ajax-api.itheima.net/api/books",
          data: {
            bookname: "H哈哈哈",
            author: "aa",
            publisher: "dd",
          },
        }).then((res) => {
          console.log(res);
        });
      };
      //
      document.querySelector(".edit").onclick = () => {
        myAxios({
          method: "put",
          url: "http://ajax-api.itheima.net/api/books/2114",
          data: {
            bookname: "H哈哈哈qqqq",
            author: "aa",
            publisher: "dd",
          },
        }).then((res) => {
          console.log(res);
        });
      };
      //
      document.querySelector(".delete").onclick = () => {
        myAxios({
          method: "delete",
          url: "http://ajax-api.itheima.net/api/books/2114",
        }).then((res) => {
          console.log(res);
          alert("已删除");
        });
      };
    </script>
  </body>