使用promise.resolve()方法缓存数据

为什么要缓存数据？

想一下，如果我们前端在一个单页面中，很n个组件中需要同一种数据，按照常理来说，那我们需要向后台发送n条请求，那服务器很不希望请求同一条数据还要反复请求我，服务器压力也挺大，为了减小服务端的压力那我们前端就需要做一件事，既然是缓存同一条数据，我们可以把第一次请求的数据给他缓存在我们的请求函数体内部，因为函数也是一个对象，所以我们可以给函数添加一个属性来专门缓存我们的数据。接下来，我们来做一个小例子，来演示一下：

1、先用nodejs搭建一个简单的服务器

const express = require("express")
const app = express()
const cors = require("cors")
app.use(cors())
app.get("/user", (req, res) => {
    let dat = req.query
    switch (dat.name) {
      case "张三":
          res.send({
              id: 1,
              name: '张三'
          })
          break;
      case "李四":
          res.send({
              id: 2,
              name: '李四'
          })
          break;
      case "王二":
          res.send({
              id: 3,
              name: '王二'
          })
          break;
    }
})
app.listen(80, () => {
    console.log("serve run in http://127.0.0.1");
})

2、使用promise封装ajax，向后台发送数据

function Ajax(url) {
    return new Promise((resolve, reject) => {
        let xhr = new XMLHttpRequest();
        xhr.open("GET", url, true);
        xhr.send()
        xhr.onreadystatechange = function () {
            if (xhr.status === 200) {
                resolve(JSON.parse(xhr.responseText));
            } else {
                reject("请求失败")
            }
        }
        xhr.onerror = function () {
            reject(this)
        }
    })
}

3、使用promise.resolve方法缓存请求的数据

一些步骤的说明，注释里面都写好了，主要就是运用函数也是一个对象，我们可以向其中设置一些属性，来缓存我们的数据~

function query(name) {
        // 判断query有没有cache属性，没有则给query添加一个cache属性，并设置为一个map类型
        // map类型可以让我们往里面添加数据
        let cache = query.cache || (query.cache = new Map())
        // 判断cache中是否有我们向后台请求的name，如果有我们就直接拿出来用
        if (cache.has(name)) {
            console.log("走缓存了");
            // 如果cache里面有我们的name，这里就直接使用resolve方法将我们的数据交出去
            return Promise.resolve(cache.get(name))
        }
        return Ajax(`http://localhost/user?name=${name}`).then(user => {
            console.log("没走缓存");
            // 这里就是第一次我们进行请求数据，随后成功拿到数据之后，
            // 将我们的数据存进我们设置的cache里面缓存起来
            cache.set(name, user)
            return user
        })
    }

4、调用我们的方法，输出我们的测试用例

详细的步骤说明在代码注释里~

// 第一次，我们进行请求调用，这里因为cashe里面还没有我们数据，所以，不会走缓存
 query("李四").then(user => {
     console.log(user);
 })
 // 第二次进行请求，因为我们进行缓存的操作了，就会走我们的缓存
 setTimeout(() => {
     query("李四").then(user => {
         console.log(user);
     })
 },2000)
  // 第三次进行请求，也会走我们的缓存
 setTimeout(() => {
     query("李四").then(user => {
         console.log(user);
     })
 },2000)

加定时器是为了符合我们进行后台请求数据的一个正确访问流程，如果不加定时器，可能会导致都没走缓存，原因是因为：第一请求还没完成，第二次，第三次就快速请求后台了，在第一次请求还没完成请求数据，还没进行缓存的操作，后面的就发送请求数据回来了。
输出我们测试数据

没走缓存   {id: 2, name: '李四'}
走缓存了   {id: 2, name: '李四'}
走缓存了   {id: 2, name: '李四'}

5、总结

这个方法其实是promise的一个简写形式，可以方便我们使用promise进行我们的一个数据缓存的效果，减少了向后台请求的次数，减轻了服务器的压力，可能写的有不太好的地方，谢谢大家给我提出来哦~