HTTP协议1

官网学习网址：HTTP | MDN

常规信息

常规请求头信息：

状态码：
200 正常响应
404 未找到资源
500 服务端一场的
3** 重定向 资源缓存

响应头信息：

客户端允许的请求方法类型
Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS
设置发起请求的源IP
Access-Control-Allow-Origin: *（*表示所有）
http连接的连接方式
Connection : keep-alive（保持连接）
服务端响应数据的长度
Content-Length: 100（请求体的长度）
服务端响应数据的类型
Content-Type: application/json（响应体的类型）

Date: Mon, 23 May 2022 08:50:10 GMT（响应时间）
Keep-Alive（保持连接）: timeout=15（保持连接的超时时间）

请求头信息：

http缓存

强制缓存 ：Cache-control  Expires   

协商缓存：If-Modified-Since If-None-Match

清理缓存的方式

1、打开开发者工具左上角的刷新图标（操作顺序见下图中的2）

2、在开发者工具中停用缓存（下图中的4）

cache-control（优先级更高）

mdn网址：Cache-Control - HTTP | MDN

操作：

新建chapter10，终端

koa2 -e httpserver

cd httpserver

npm install（初始化）

views/index.ejs

<script>

    fetch("http://localhost:3000/getdata")

      .then((res) => {

        return res.json();

      })

      .then((res) => {

        console.log(res);

      });

  </script>

routers/index.js

router.get("/getdata", async (ctx, next) => {

  // ctx.set("Cache-Control", "public, max-age=5");

  // 不设置缓存

  ctx.set("Cache-Control", "no-store");

  ctx.body = {

    username: "zhangsan",

    age: 30,

  };

});

效果展示：

Expires

mdn网址：Expires - HTTP | MDN

操作：

views/index.ejs

fetch("http://localhost:3000/getmsg")

      .then((res) => {

        return res.json();

      })

      .then((res) => {

        console.log(res);

      });

router/index.js

router.get("/getmsg", async (ctx, next) => {

  let timer = Date.now() + 3000; //对应的是毫秒

  timer = new Date(timer);

  timer = timer.toGMTString();

  // 强制缓存，在timer到期之前使用缓存数据

  ctx.set("Expires", timer);

  ctx.body = {

    msg: "hello world",

  };

});

效果展示：

If-Modified-Since

操作：

routers/index.js

const router = require("koa-router")();

const fs = require("fs");

const path = require("path");

router.get("/", async (ctx, next) => {

  await ctx.render("index", {

    title: "Hello Koa 2!",

  });

});

router.get("/getfile", async (ctx, next) => {

  let headers = ctx.request.headers;

  let since = headers["if-modified-since"];

  let fileObj = fs.statSync(path.join(__dirname, "1.txt"));

  let mtimer =( new Date(fileObj.mtimeMs)).toGMTString();

  if(since == mtimer){

    ctx.status = 304;

  }

  else{

    let timer = mtimer;

    ctx.set("Last-Modified", timer);

    ctx.body = {

      file: "file last modified",

    };

  }

  let timer = new Date().toGMTString();

  ctx.set("Last-Modified", timer);

  ctx.body = {

    file: "file last modified",

  };

});

views/index.ejs

fetch("http://localhost:3000/getfile")

      .then((res) => {

        return res.json();

      }).then((res) => {

        console.log(res);

      })

效果展示：