铁汁，前端缓存接口数据了解一下

我们业务中会遇见需要频繁请求后端的接口数据，但是前面已经请求过的数据其实没有必要再次进行请求，而且再怎么说，再次进行请求还是需要时间。

1、对比

不多说，直接拿级联选择器进行对比（其实个人认为拿到完整数据进行分片加载更好）

• 没有缓存

• 有缓存

这个区别还是挺明显的吧，如果用户网不太好的话，那还不得骂骂咧咧

2、怎么做

我目前用的是vue2版本的uni-app，所以在data里面声明一个叫 cacheData 的对象，当值改变的时候触发 changeHandler 的函数。

    async changeHandler(event) {
      let { columnIndex, indexs, picker = this.$refs.uPicker } = event;
      const city = this.columns[0][indexs[0]];
      if (columnIndex === 0) {
        // 如果 cacheData 里面有则不走接口，直接设置第二列的值
        if (this.cacheData[city.id]) {
          picker.setColumnValues(1, this.cacheData[city.id]);
        } else { // 如果没有
          this.pickerLoading = true;
          try {
            const { data } = await this.getAddress(city.id);
            // 则将当前值添加进 cacheData 这个对象里面，key的话就是当前的城市id，值的话就是接口获取到的数据
            this.cacheData[city.id] = data;
            // 获取到值以后直接设置第二列的数据
            picker.setColumnValues(1, data);
          } catch (error) {
            console.log("🚀 ~ changeHandler ~ error:", error);
          } finally {
            this.pickerLoading = false;
          }
        }
      }
    }

• 毕竟前端是离用户姥爷最近的存在，得时时刻刻想着姥爷们用着开心，一点一点的小优化，多了，小优化也会变成大优化，这样姥爷们才会喜欢这个产品。
• 最后，写的不太好，大佬们有什么意见尽管提。