模拟

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 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);
    });
}

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

二、Cache Request

---

三、Single Request Abort

---

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)
});

四、Multiple Request Abort

---

五、Multiple Request Abort And Cache Request

---

补充服务

---

Koa Server

const Koa = require("koa");
const KoaRouter = require("koa-router");
const { koaBody } = require("koa-body");

const app = new Koa();
const router = new KoaRouter({ prefix: "/" });

function wait(time) {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve();
    }, time);
  });
}

router.get("sync", async (ctx) => {
  ctx.body = {
    code: 200,
    msg: "get 同步请求成功！",
    data: ctx.request.query,
  };
});

router.get("async", async (ctx) => {
  await wait(8000);
  ctx.body = {
    code: 200,
    msg: "get 异步请求成功！",
    data: ctx.request.query,
  };
});

router.post("sync", async (ctx) => {
  ctx.body = {
    code: 200,
    msg: "post 同步请求成功！",
    data: ctx.request.body,
  };
});

router.post("async", async (ctx) => {
  await wait(8000);
  ctx.body = {
    code: 200,
    msg: "post 异步请求成功！",
    data: ctx.request.body,
  };
});

app.use(
  koaBody({
    text: true,
    json: true,
    multipart: true,
    urlencoded: true,
  })
);
app.use(router.routes());

app.listen("4000", () => {
  console.log("服务启动成功!");
});