Javascript 如何实现缓存| |权力游戏API_Javascript_Caching

Javascript 如何实现缓存| |权力游戏API

javascript caching

Javascript 如何实现缓存| |权力游戏API,javascript,caching,Javascript,Caching,我正在玩权力游戏Api- 文件中提到他们正在实施利率限制。因此，实现缓存非常重要比如说，我想通过点击按钮打印Api中所有房屋的名称 function getAllHouseNames() { for (let i = 1; i <= 45; i++) { getHouseNames(i) } } async function getHouseNames(page) { var req = new XMLHttpRequest(); req.onr

我正在玩权力游戏Api-

文件中提到他们正在实施利率限制。因此，实现缓存非常重要

比如说，我想通过点击按钮打印Api中所有房屋的名称

 function getAllHouseNames() {
   for (let i = 1; i <= 45; i++) {
     getHouseNames(i)
    }
  }

async function getHouseNames(page) {
  var req = new XMLHttpRequest();

  req.onreadystatechange = await
  function() {
    if (this.readyState == 4 && this.status == 200) {
      //console.log(req.getResponseHeader("link"));
      let houseObj = JSON.parse(this.responseText);
      for (let i = 0; i < houseObj.length; i++) {
        let p = document.createElement("p");
        let name = document.createTextNode(houseObj[i].name);
        p.appendChild(name);
        document.body.appendChild(p);
      }
    }
  };
  req.open("GET", "https://www.anapioficeandfire.com/api/houses?page=" + page + "&pageSize=10", true);
  req.send();
};

函数getAllHouseNames（）{

for（让i=1；i创建一个全局/模块级变量。在下面的代码中，我将其称为cache。然后在检索到属性后将其添加到其中。然后，这些属性可供以后使用

<!doctype html>
<head>
    <title>A Song of Ice and Fire</title>
<!-- include jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
var cache = {}; // create a new object for the cache
$(document).ready(function() {
    // once the page is loaded, register a click listener on the button
    $("#btn-get-house-names").on("click", getAllHouseNames);
});

function getAllHouseNames() {
    // if the cache object doesn't have 
    // a property called "houseNames", go ajax
    // otherwise just display the house names in the document
    if (!cache.houseNames) {
        $("#div-house-names").html("Getting House Names");
        getHouseNamesAjax()
    } else {
        $("#div-house-names").html("");
        $.each(cache.houseNames, function(index, houseName) {
            $("#div-house-names").append("<p>" + houseName + "</p>");
        });
    }
}

function getHouseNamesAjax(page) { // use jQuery to ajax
    let pageId = "";
    let pageSize = "pageSize=10";
    if (page) {
        pageId = "?page=" + page + "&" + pageSize;
    } else {
        pageId = "?" + pageSize;
    }

    $.ajax({
        type: "GET",
        url: "https://www.anapioficeandfire.com/api/houses" + pageId,
        dataType: "json",
        success: function(data, textStatus, request) {
            if (!cache.houseNames) { // add the houseNames array to the cache object
                cache.houseNames = [];
            }
            $.each(data, function(index, house) {
                cache.houseNames.push(house.name); // append to the end of the array
            });
            if (request.getResponseHeader("link")) { // this looks to see if there is another page of house names
                let headerLinks = request.getResponseHeader("link").split(",");
                let hasNext = false;
                $.each(headerLinks, function(index, headerLink) {
                    let roughLink = headerLink.split("; ")[0];
                    let roughRel = headerLink.split("; ")[1];
                    let rel = roughRel.substring(5, roughRel.length - 1);
                    if (rel == "next") {
                        let pageNum = roughLink.split("?page=")[1].split("&page")[0];
                        getHouseNamesAjax(pageNum);
                        hasNext = true;
                        return false; // break out of $.each()
                    }
                });
                if (!hasNext) { 
                    // if no more pages of houseNames, 
                    // display the house names on the page.
                    // We have to do this here, because ajax is async
                    // so the first call didn't display anything.
                    getAllHouseNames();
                }
            }
        },
        error: function(data, textStatus, request) {
            alert(textStatus);
        }
    });
};
</script>
</head>
<body>
<input type="button" id="btn-get-house-names" value="Get House Names"/>
<div id="div-house-names"> <!-- house names -->
</div>
</body>
</html>


冰与火之歌
var cache={}；//为缓存创建一个新对象
$（文档）.ready（函数（）{
//加载页面后，在按钮上注册一个单击侦听器
$（“#btn获取房屋名称”）。在（“单击”，获取所有房屋名称）；
});
函数getAllHouseNames（）{
//如果缓存对象没有
//一个叫“houseNames”的酒店
//否则，只需在文档中显示房屋名称即可
如果（！cache.houseNames）{
$（“#div house names”）.html（“获取房屋名称”）；
getHouseNamesAjax（）
}否则{
$（“#div house names”）.html（“”）；
$.each（cache.houseNames，函数（索引，houseName）{
$（“#div house names”）。追加（“”+house name+””）；
});
}
}
函数getHouseNamesAjax（第页）{//使用jQuery创建ajax
让pageId=“”；
让pageSize=“pageSize=10”；
若有（第页）{
pageId=“？page=“+page+”&“+pageSize；
}否则{
pageId=“？”+页面大小；
}
$.ajax({
键入：“获取”，
url:“https://www.anapioficeandfire.com/api/houses“+pageId，
数据类型：“json”，
成功：功能（数据、文本状态、请求）{
如果（！cache.houseNames）{//将houseNames数组添加到缓存对象中
cache.houseNames=[]；
}
美元。每个（数据、功能（索引、房屋）{
cache.houseNames.push（house.name）；//追加到数组末尾
});
if（request.getResponseHeader（“link”）{//这将查看是否还有另一页房屋名称
让headerLinks=request.getResponseHeader（“链接”）.split（“，”）；
让hasNext=false；
$.each（标题链接，函数（索引，标题链接）{
设rawLink=headerLink.split（“；”）[0]；
设rawrel=headerLink.split（“；”）[1]；
设rel=roughRel.substring（5，roughRel.length-1）；
如果（rel==“下一步”）{
让pageNum=roughLink.split（“？page=”）[1]。split（“&page”）[0]；
getHouseNamesAjax（pageNum）；
hasNext=true；
return false；//从$.each（）中取出
}
});
如果（！hasNext）{
//如果没有更多的户名，
//在页面上显示房屋名称。
//我们必须在这里这样做，因为ajax是异步的
//所以第一个电话没有显示任何内容。
getAllHouseNames（）；
}
}
},
错误：函数（数据、文本状态、请求）{
警报（文本状态）；
}
});
};

你不能等待一个函数。你的意思是围绕XHR构建一个

新承诺吗？谢谢！是的，这就是我要做的。另外，我如何实现缓存技术，以便每次用户单击按钮时不会触发45个请求？getAllHouseNames函数带有承诺，但首先你不需要让你的函数正确地返回一个承诺吗