模拟

2023年07月14日

柏拉文

越努力，越幸运

一、Request

---

function normalizeUrl(url, params) {
  let queryString = Object.keys(params).reduce((prev, key) => {
    return (prev += `${key}=${params[key]}&`);
  }, "?");
  return url + queryString.slice(0, queryString.length - 1);
}

function normalizeToFormUrlencoded(params) {
  const searchParams = new URLSearchParams();
  Object.keys(params).forEach((key) => {
    searchParams.append(key, params[key]);
  });
  return searchParams.toString();
}

function normalizeToFormData(params) {
  const formData = new FormData();
  Object.keys(params).forEach((key) => {
    formData.append(key, params[key]);
  });
  return formData;
}

function normalizeToJson(params) {
  return JSON.stringify(params);
}

function normalizeBody(headers, params) {
  if (!headers) {
    return normalizeToJson(params);
  }
  const contentType =
    headers["Content-Type"] ||
    headers["Content-type"] ||
    headers["content-type"];
  if (!contentType || contentType === "application/json") {
    return normalizeToJson(params);
  } else if (contentType === "x-www-form-urlencoded") {
    return normalizeToFormUrlencoded(params);
  } else {
    return normalizeToFormData(params);
  }
}

function request(url, method, params, headers) {
  let ajax = new XMLHttpRequest();
  const baseRequest = () => {
    return new Promise((resolve, reject) => {
      const normalizeMethod = method.toUpperCase();
      const normalizedUrl =
        normalizeMethod === "GET" ? normalizeUrl(url, params) : url;
      ajax.open(normalizeMethod, normalizedUrl);
      ajax.addEventListener("readystatechange", function () {
        if (ajax.readyState === 4 && [200, 304].includes(ajax.status)) {
          return resolve(JSON.parse(ajax.responseText));
        }
      });
      ajax.addEventListener("error", function () {
        return reject("请求已出错");
      });
      ajax.addEventListener("abort", function () {
        return reject(`请求已中断`);
      });
      const normalizedBody =
        normalizeMethod === "GET" ? null : normalizeBody(headers, params);
      ajax.send(normalizedBody);
    });
  };
  return {
    ajax,
    run: baseRequest,
  };
}

const { ajax, run } = request("http://test.bolawen.com/server/async", "post", {
  a: 1,
  b: 2,
});
run()
  .then((res) => {
    console.log(res);
  })
  .catch((error) => {
    console.log(error);
  });

setTimeout(() => {
  ajax.abort();
}, 3000);

二、Cache Request

---

三、Single Request Abort

---

四、Multiple Request Abort

---

五、Multiple Request Abort And Cache Request

---