【大白话】说JS的实际应用之强缓存&协商缓存和回调地狱

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第18天，点击查看活动详情

前言

大白话说JS内容包括：DOM的一些操作，Promise相关， 微任务宏任务，作用域，变量提升，闭包，变量类型，深浅拷贝，原型和作用域链，后续争取把js重点都记录上，深入浅出。

强缓存和协商缓存

浏览器向服务器发送请求和资源标识，服务器进行Last-Modified和 Etag判断看不是最新资源。否的话（强制缓存）返回最新资源，标识符和200状态码；是的话（协商缓存）就返回304，从本地缓存里拿资源。一句话(看资源有无更新，更新了就200)。

一张图了解整个过程：

那么cache-control里有什么内容呢？有资源的状态码 status，缓存的有效时间 max-age。另外提个知识点：no-cache是弱缓存，要进行验证；no-store是不缓存，只允许你向服务器发送请求，不缓存在本地。

回调地狱

问题：在ES5前，当要获取一些异步的数据，就无法通过return拿，这时需要回调获取，如果要的数据太多，回调就要注意顺序。然后请求的代码就像大箭头一样。

1. Promise 的实例就是一个异步操作，调用 .then() 方法，指定成功（resolve）将数据传递出来，回调函数拿到异步数据；
2. 使用 async/await。（结合promise，await返回的就是promise的resolve数据）
3. 使用 generator。

例如按顺序依次读取众多文件，会出现回调地狱，采用 Promise 异步的方法使代码能向下延伸，更具可读和维护性。后续需要添加新的读取文件，只需按格式添加。

 // 产生回调地狱:获取一些异步数据，无法通过return拿到，回调获取产生回掉地狱
    function work(fn) {
      setTimeout(() => {
        fn("工作中");
      }, 2000)
    }

    function sleep(fn) {
      setTimeout(() => {
        fn("睡觉");
      }, 1000)
    }

    // 通过回调获取异步数据,产生回调地狱
    work(function (data) {
      console.log(data);
      sleep(function (data) {
        console.log(data);
        sleep1(function (data) {
          console.log(data);
          sleep2(function (data) {
            console.log(data);
            sleep3(function (data) {
              console.log(data);
            })
          })
        })
      })
    })

正常情况是先打印睡觉在打印工作，如果需要的数据过多且按一定的顺序执行，上面的方法显然不合不适，下面我就列举俩解决方法

function work() {
      return new Promise(function (resolve) {
        setTimeout(() => {
          resolve("工作中");
        }, 2000)
      })
    }

    function sleep() {
      return new Promise(function (resolve) {
        setTimeout(() => {
          resolve("睡觉");
        }, 1000)
      })
    }

    // 使用promise解决回调地狱
    // work().then(function (data) {
    //   console.log(data);
    //   return sleep();
    // }).then(function (data) {
    //   console.log(data);
    // })

    // async/await解决
    async function getData() {
      let work1 = await work();
      console.log(work1);
      let sleep1 = await sleep();
      console.log(sleep1);
    }
    getData();