Ajax 系列：2️⃣ 使用 Promise 封装 Ajax

Ajax 的 GET 请求封装

function getPromise(param) {
  return new Promise((resolve, reject) => {
    // 0. 将参数转换成字符串格式：xxx?name=cez&age=18
    var objStr = objToString(param.data);

    // 1. 创建一个异步对象 xmlhttp;
    var xmlhttp = new XMLHttpRequest();

    // 2. 指定请求方法和URL
    xmlhttp.open("GET", param.url + "?" + objStr);

    // 3. 发送请求
    xmlhttp.send();

    // 4. 服务器响应处理
    xmlhttp.onreadystatechange = function () {
      if (xmlhttp.readyState === 4) {
        if (xmlhttp.status === 200) {
          // 请求成功的回调
          resolve(xmlhttp);
        } else {
          // 请求失败的回调
          reject(xmlhttp);
        }
      }
    };
  });
}

function objToString(obj) {
  var res = [];
  for (var key in obj) {
    res.push(key + "=" + obj[key]);
  }

  return res.join("&");
}

// get 请求
getPromise({
  url: "/api/admin/GetAdminList",
  data: data,
})
  .then((res) => {
    console.log("请求成功", res);
  })
  .catch((err) => {
    console.log("请求失败", err);
  });

🚀 优化：

在请求中设置超时功能，即告诉它我的请求会等待多长的时间，如果这么长的时间内都没有响应请求，那就自动终止这次请求；

function getPromise(param) {
  return new Promise((resolve, reject) => {
    var timer, objStr, xmlhttp;

    // 0. 将参数转换成字符串格式：xxx?name=cez&age=18
    objStr = objToString(param.data);

    // 1. 创建一个异步对象 xmlhttp;
    xmlhttp = new XMLHttpRequest();

    // 1.1 启动计时器，在 timeout 毫秒后将中止请求
    if (param.timeout) {
      timer = setTimeout(function () {
        xmlhttp.abort(); // 中止请求
      }, param.timeout);
    }

    // 2. 指定请求方法和URL
    xmlhttp.open("GET", param.url + "?" + objStr);

    // 3. 发送请求
    xmlhttp.send();

    // 4. 服务器响应处理
    xmlhttp.onreadystatechange = function () {
      if (xmlhttp.readyState === 4) {
        // 此时请求已响应，取消中止请求操作
        clearTimeout(timer);

        if (ajax.status === 200) {
          // 请求成功的回调
          resolve(xmlhttp);
        } else {
          // 请求失败的回调
          reject(xmlhttp);
        }
      }
    };
  });
}

//
function objToString(obj) {
  var res = [];
  for (var key in obj) {
    res.push(key + "=" + obj[key]);
  }

  return res.join("&");
}

// get 请求
getPromise({
  url: "/api/admin/GetAdminList",
  data: data,
  timeout: 2000,
})
  .then((res) => {
    console.log("请求成功", res);
  })
  .catch((err) => {
    console.log("请求失败", err);
  });

---

Ajax 的 POST 请求封装

POST 请求封装和 GET 请求类似，需要注意的一点是在发送 POST 请求前要设置请求头。

function postPromise(param) {
  return new Promise((resolve, reject) => {
    var timer, objStr, xmlhttp;

    // 0. 将参数转换成字符串格式：name=cez&age=18
    objStr = objToString(param.data);

    // 1. 创建一个异步对象 xmlhttp;
    xmlhttp = new XMLHttpRequest();

    // 1.1 启动计时器，在 timeout 毫秒后将中止请求
    if (param.timeout) {
      timer = setTimeout(function () {
        xmlhttp.abort(); // 中止请求
      }, param.timeout);
    }

    // 2. 指定请求方法和URL
    xmlhttp.open("POST", param.url);

    // 2.1 添加请求头
    xmlhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');

    // 3. 发送请求
    xmlhttp.send(objStr);

    // 4. 服务器响应处理
    xmlhttp.onreadystatechange = function () {
      if (xmlhttp.readyState === 4) {
        // 此时请求已响应，取消中止请求操作
        clearTimeout(timer);

        if (ajax.status === 200) {
          // 请求成功的回调
          resolve(xmlhttp);
        } else {
          // 请求失败的回调
          reject(xmlhttp);
        }
      }
    };
  });
}

//
function objToString(obj) {
  var res = [];
  for (var key in obj) {
    res.push(key + "=" + obj[key]);
  }

  return res.join("&");
}

// post 请求
postPromise({
  url: "/api/admin/GetAdminList",
  data: data,
  timeout: 2000,
})
  .then((res) => {
    console.log("请求成功", res);
  })
  .catch((err) => {
    console.log("请求失败", err);
  });

---

Ajax 的完整封装

在判断是何种请求时，使用了 toLowerCase() 方法将字符串转成小写再对比，这样就可以在传实参时不考虑大小写问题。

function ajaxPromise(param) {
  return new Promise((resolve, reject) => {
    var timer, objStr, xmlhttp;

    // 0. 将参数转换成字符串格式：name=cez&age=18
    objStr = objToString(param.data);

    // 1. 创建一个异步对象 xmlhttp;
    xmlhttp = new XMLHttpRequest();

    // 1.1 启动计时器，在 timeout 毫秒后将中止请求
    if (param.timeout) {
      timer = setTimeout(function () {
        xmlhttp.abort(); // 中止请求
      }, param.timeout);
    }

    // 2. 指定请求方法和URL
    if (param.type.toLowerCase() === "get") {
      xmlhttp.open(param.type, param.url + "?" + objStr);

      // 3. 发送请求
      xmlhttp.send();
    } else {
      xmlhttp.open(param.type, param.url);

      // 2.1 添加请求头
      xmlhttp.setRequestHeader(
        "Content-type",
        "application/x-www-form-urlencoded"
      );

      // 3. 发送请求
      xmlhttp.send(objStr);
    }

    // 4. 服务器响应处理
    xmlhttp.onreadystatechange = function () {
      if (xmlhttp.readyState === 4) {
        // 此时请求已响应，取消中止请求操作
        clearTimeout(timer);

        if (ajax.status === 200) {
          // 请求成功的回调
          resolve(xmlhttp);
        } else {
          // 请求失败的回调
          reject(xmlhttp);
        }
      }
    };
  });
}

function objToString(obj) {
  var res = [];
  for (var key in obj) {
    res.push(key + "=" + obj[key]);
  }

  return res.join("&");
}

ajaxPromise({
  url: "/api/admin/GetAdminList",
  type: "get",
  data: data,
  timeout: 2000,
})
  .then((res) => {
    console.log("请求成功", res);
  })
  .catch((err) => {
    console.log("请求失败", err);
  });