ajax Pormise封装管理

ajxa 使用起来不如 axios 方便配置和抽离，反复配置很难受，模仿着经常 封装 axios 的样子，封装个 ajax 配置，封装文件分为：

1. ajax 抽离文件

• request.js ajxa配置文件
• api.js 多接口的封装文件

/* 1. 创建个 ajax  promise 对象 */
const ajax = (option) => {
  return new Promise((reslove, rejetc) => {
    // 1. 格式化数据
    let param = formParam(option.data);

    // 2. 创建对象
    if (window.XMLHttpRequest) {
      xhr = new XMLHttpRequest();
    } else {
      xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }

    // 3. 配置

    /* 设置公共请求头携带参数 */

    // 6. 格式化数据方法
    function formParam(data) {
      let arr = [];
      for (let prop in arr) {
        /* GET 方法，讲参数按照 格式序列化，加入到数组 */
        arr.push(`${prop}=${data[prop]}`);
      }
      /* 转为 字符串 & 隔开 */
      return arr.join("&");
    }

    /* 设置请求时长 */
    xhr.timeout = 500;

    /* 发起请求 */
    if (option.type == "get") {
      /* GTE 方法拼接链接，send 参数 null */
      xhr.open(option.type, option.url + "?" + param, true);
      xhr.setRequestHeader("token", option.token);
      xhr.setRequestHeader("aid", option.aid);
      xhr.send(null);
    } else if (option.type == "post") {
      /* POST 方法 ，参数放在 send 内 ,  切设置请求头 */
      xhr.open(option.type, option.url, true);
      xhr.setRequestHeader("Content-type", "multipart/form-data");
      xhr.setRequestHeader("token", option.token);
      xhr.setRequestHeader("aid", option.aid);
      xhr.send(option.data);
    }

    // 5. 接收返回参数
    xhr.onreadystatechange = () => {
      //  readyState=4  代表已发送请求
      if (xhr.readyState == 4) {
        if (xhr.status == 200) {
          reslove(JSON.parse(xhr.responseText));
        } else {
          rejetc(JSON.parse(xhr.responseText));
        }
      }
    };
  });
};

2. api.js 按需使用接口

单独抽离管理的 接口请求，使用时，传入 option 配置即可

let textDOM = document.querySelector("#text");
let btn = document.querySelector("#btn");
let textBox = document.querySelector(".textBox");
let table_list = document.querySelector("#table_list");
let msg = null;

function requsetMSG() {
  /* 请求接口 */
  let option = {
    type: "post",
    url: "http://okkk.221320.bcc/admin.php?c=index&a=asdsa",
    data: {
      pageIndex: "2",
      pageSize: "20",
    },
    token: "2030632asdsaded939",
    aid: "+mnasdasSKmyL5L+iasdasMstkz",
  };

  ajax(option)
    .then((res) => {
      console.log("---------响应成功------------");
      msg = res.data.list;
      // console.log(msg);
      createEle();
    })
    .catch((err) => {
      console.log("---------响应失败------------");
      console.log(err);
    });
}

btn.addEventListener("click", function () {
  requsetMSG();
  console.log("ok");
});

/* 循环渲染标签 */
function createEle() {
  console.log(msg);
  /* 渲染追加行html */
  msg.forEach((item) => {
    let tr_tag = document.createElement("tr");
    let inHTML = `
    <td> ${item.year}-${item.month} </td>
    <td> ${item.added_money}</td>
    <td> ${item.arrival_money}</td>
    <td> ${item.arrival_money_percent.percent}</td>
    `;
    tr_tag.innerHTML = inHTML;
    table_list.appendChild(tr_tag);
  });
}