请求

2023年07月14日

柏拉文

越努力，越幸运

一、Abort Request

---

1.1 Axios

function request(url, method, params, signal) {
  const normalizeMethod = method.toUpperCase();
  const normalizedOptions = {
    method,
    signal: signal,
    params: normalizeMethod === "GET" ? params : null,
    body: normalizeMethod === "GET" ? null : params,
  };
  return axios({
    url,
    method: normalizeMethod,
    ...normalizedOptions,
  })
    .then((res) => {
      if (res.status === 200) {
        return Promise.resolve(res.data);
      }
      return Promise.reject(res.statusText);
    })
    .catch((error) => {
      if (typeof error === "object") {
        return Promise.reject(`错误类型为: ${error.name}, 具体原因: ${error}`);
      }
      return Promise.reject(error);
    });
}

const controller = new AbortController();
const signal = controller.signal;
request("http://test.bolawen.com/server/async", "post", { a: 1, b: 2 }, signal)
  .then((res) => {
    console.log(res);
  })
  .catch((error) => {
    console.log(error);
  });
setTimeout(() => {
  controller.abort();
}, 3000);

1.2 Fetch

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 request(url, method, params, header, signal) {
  const normalizeMethod = method.toUpperCase();
  const normalizedUrl =
    normalizeMethod === "GET" ? normalizeUrl(url, params) : url;
  const normalizedOptions = {
    method,
    signal: signal,
    body: normalizeMethod === "GET" ? null : JSON.stringify(params),
  };
  return fetch(normalizedUrl, {
    method: normalizeMethod,
    ...normalizedOptions,
  })
    .then((res) => {
      if (res.ok) {
        return res.json();
      }
      return Promise.reject(res.statusText);
    })
    .catch((error) => {
      if (typeof error === "object") {
        return Promise.reject(`错误类型为: ${error.name}, 具体原因: ${error}`);
      }
      return Promise.reject(error);
    });
}

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

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

二、Timeout Abort Request

---

2.1 Axios

function request(url, method, params, signal) {
  const normalizeMethod = method.toUpperCase();
  const normalizedOptions = {
    method,
    signal: signal,
    params: normalizeMethod === "GET" ? params : null,
    body: normalizeMethod === "GET" ? null : params,
  };
  return axios({
    url,
    method: normalizeMethod,
    ...normalizedOptions,
  })
    .then((res) => {
      if (res.status === 200) {
        return Promise.resolve(res.data);
      }
      return Promise.reject(res.statusText);
    })
    .catch((error) => {
      if (typeof error === "object") {
        return Promise.reject(`错误类型为: ${error.name}, 具体原因: ${error}`);
      }
      return Promise.reject(error);
    });
}

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

2.2 Fetch

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 request(url, method, params, header, signal) {
  const normalizeMethod = method.toUpperCase();
  const normalizedUrl =
    normalizeMethod === "GET" ? normalizeUrl(url, params) : url;
  const normalizedOptions = {
    method,
    signal: signal,
    body: normalizeMethod === "GET" ? null : JSON.stringify(params),
  };
  return fetch(normalizedUrl, {
    method: normalizeMethod,
    ...normalizedOptions,
  })
    .then((res) => {
      if (res.ok) {
        return res.json();
      }
      return Promise.reject(res.statusText);
    })
    .catch((error) => {
      if (typeof error === "object") {
        return Promise.reject(`错误类型为: ${error.name}, 具体原因: ${error}`);
      }
      return Promise.reject(error);
    });
}

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

三、Timeout Explicit Abort 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 request(url, method, params, header, signal) {
  const normalizeMethod = method.toUpperCase();
  const normalizedUrl =
    normalizeMethod === "GET" ? normalizeUrl(url, params) : url;
  const normalizedOptions = {
    method,
    signal: signal,
    body: normalizeMethod === "GET" ? null : JSON.stringify(params),
  };
  return fetch(normalizedUrl, {
    method: normalizeMethod,
    ...normalizedOptions,
  })
    .then((res) => {
      if (res.ok) {
        return res.json();
      }
      return Promise.reject(res.statusText);
    })
    .catch((error) => {
      if (typeof error === "object") {
        return Promise.reject(`错误类型为: ${error.name}, 具体原因: ${error}`);
      }
      return Promise.reject(error);
    });
}

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

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