zoukankan      html  css  js  c++  java
  • angularJs中缓存数据,免去重复发起请求的几种写法

    带缓存处理的两种写法

    过程:点击button触发load()方法,请求数据成后显示到页面中。如果已经请求过则从缓存中读取。

    在线浏览

    写法1:

        function demo(){
          if (demo.cache == undefined) {
            return $http.get('https://api.github.com/users/github')
              .then(function(data, status, headers){
                demo.cache = data.data;
                return $q(function (resolve, reject) {
                  resolve(demo.cache);
                });
              })
          }else {
            console.log('from cache');
            return $q(function (resolve, reject) {
              resolve(demo.cache);
            });
          }
        }
    
    
        // 点击加载
        $scope.load = function() {
          demo().then(function(data){
            $scope.list = data.data;
          })
        }

    写法2:

    感觉第二种写法好些,注意细节。

        function demo(){
          let deferred = $q.defer(), that = this;if (that.cache == undefined) {
            $http.get('https://api.github.com/users/github')
              .success(function(data, status, headers){
                that.cache = data;
                deferred.resolve(that.cache);
              })
          }else {
            console.log('from cache');
            deferred.resolve(that.cache);
          }
          return deferred.promise; 
        }
    
    
        // 点击加载
        $scope.load = function() {
          demo().then(function(data){
            $scope.list = data;
          })
        }

    写法3 利用闭包缓存结果

        // 利用闭包缓存结果
        function demo2() {
          let defer = $q.defer(), cache;
          return function() {
            if (cache == undefined) {
              $http.get('https://api.github.com/users/github')
                  .then((res) => {
                      cache = res.data;
                      defer.resolve(cache);
                  })
            }else {
              console.log('from cache');
              defer.resolve(cache);
            }
            return defer.promise;
          }
        }
    
        // 点击加载
        let startDemo = demo2();
        $scope.load = function() {
          startDemo().then(function(data){
            $scope.list = data;
          })
        }
  • 相关阅读:
    wpf读取mysql字段类型为text的问题
    设计模式简介
    为 RESTful API 配置 CORS 实现跨域请求
    js FileReader 读取文件
    js读取文件fileReader
    制作svg动态图形效果
    H5与Native交互之JSBridge技术
    位(bit)、字节(byte)、字符、编码之间的关系
    node.js的net模块实现socket通信
    Flexbox如何将页面底部固定在屏幕最下方
  • 原文地址:https://www.cnblogs.com/mafeifan/p/6223259.html
Copyright © 2011-2022 走看看