利用XMLHttpRequest和Promise实现简单的axios

         get方式获取参数那边有一个问题，已修改。

        此简单的axios实现，适用于一些项目需要加载速度快，消耗低，而且发送请求的方式仅有post，或get，可以不用引入axios的js文件，直接定义一个函数就可以实现前后端异步请求。

        但此函数没有解决跨域问题，想要解决，需在服务器端设置响应头，其中response是

HttpServletResponse对象

        response.setHeader("Access-Control-Allow-Origin", "*");

//基于axios原理实现自定义函数实现异步请求
    function axios(config) {

      //用Promise对象实现对异步请求的结果进行管理
      return new Promise((resolve, reject) => {

          //创建一个XMLHttpRequest对象来发送异步请求
          const xhr = new XMLHttpRequest();

          //因为get方式请求有时会在url后面添加参数，所以这里进行判断拼接
          if (config.params) {

              //将传过来的参数转换为类似于参数1=值1&参数2=值2...的JS对象形式
              const paramsObj = new URLSearchParams(config.params);

              //将JS对象转换成 参数1=值1&参数2=值2...的字符串形式
              const paramsStr = parmsObj.toString();

              //拼接字符串
              config.url += `?${paramsStr}`;

          }

          //为异步请求设置请求方式，请求路径,如果设置，默认为GET方式,大小写都行
          xhr.open(config.method ? config.method : 'GET', config.url);
        
        
          //为xhr对象添加响应完毕事件
          xhr.addEventListener('loadend', () => {

              //根据响应状态码判断是否请求成功，并做成响应操作
              if (xhr.status >= 200 && xhr.status < 300) {

                  //将响应回来的数据转换成JS对象
                  const result = JSON.parse(xhr.response);

                  //并给Promise成功状态传递响应数据，以便Promise对异步请求的结果进行操作
                  resolve(result);

              } else {
                  reject("错误");

              }

          });

          //最后发送请求，上面的只是进行发送异步请求的配置，只有这一步才会发送请求
          //类似于axios，如果有data，就说明这个请求方式是POST方式
          if (config.data) {

            //设置请求方式为POST，返回的数据是JSON
              xhr.setRequestHeader('Content-Type','application/json');
              const data = JSON.stringify(config.data);
       
              xhr.send(data);

          } else {
              xhr.send();

          }

      })

    }

    //函数测试
    axios({
      url:'http://localhost:8080/a',

    }).then((result) => {
      const div =document.querySelector('div');

      console.log(result)

    })