javascript - 如何缓存 JQUERY GET 响应(数据)并在另一个函数中使用它？

Question

我的数据库中有下表:

+-----------+-------------+------+-----+---------+----------------+
| Field     | Type        | Null | Key | Default | Extra          |
+-----------+-------------+------+-----+---------+----------------+
| id        | int(11)     | NO   | PRI | NULL    | auto_increment |
| fullname  | varchar(50) | YES  |     | NULL    |                |
| email     | varchar(50) | YES  |     | NULL    |                |
| password  | varchar(50) | YES  |     | NULL    |                |
| gender    | varchar(50) | YES  |     | NULL    |                |
| birthdate | varchar(50) | YES  |     | NULL    |                |
+-----------+-------------+------+-----+---------+----------------+

我通过以下 ajax 方法从同一查询数据:

function getUserDB(){
    return ($.ajax({
        url: 'services/users?',
        method: 'get',
        headers: { 'Accept': 'application/json' }, 
        success: function(data) {
                console.log ("getUserDB got the user data");
                UserDB = JSON.stringify(data);
                UserDBObj = JSON.parse(UserDB);
            }
    }));
}

我有一个 HTML 页面，它应该根据 id 在不同的地方 (divs) 显示 fullname。 为了避免为每个 div 触发 jQuery，我想我可以在页面加载时存储响应并使用另一种方法来获取 fullname。 这是我写的:

function getUserName(ID){
    var username;
    console.log(" getUserName called");
    for(var index in UserDBObj){
        if (UserDBObj[index] == ID)
        {
            username = UserDBObj[index].fullname;
            console.log("Got username : "+ username);
        }
     }
    return username;
}

我为必须显示名称的相应 div 调用 getUserName(id)。 然而，这是行不通的，因为 ajax 调用是异步的，并且 getUserName(id) 甚至在获取数据之前就被调用了。

任何建议如何实现这一目标？我见过类似的问题，但没有一个是结论性的。

Answer 1

Promises(jQuery 环境中的延迟对象)是处理此类需求的最佳方式。它允许您以一种忽略 xhr 调用的特定时间的方式处理异步调用。在下面的代码中，您的 ajax 调用只被调用一次，从那时起，每当您调用 getUser 函数时，它只会使用 xhr 调用的缓存结果而不会重复它。您无需跟踪“是否加载了 ajax 结果”或类似的东西...... promise 会为您完成。

关于 ES6 Promises 规范的 MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise

jQuery Deferred 规范(与 Promises 相同的想法): https://api.jquery.com/category/deferred-object/

var xhrUsers = $.get('/api/users');

function getUser(id) {
  return xhrUsers.then(function(usersList) {
    return usersList[id];
  });
}

function getUserFullName(id) {
  return xhrUsers.then(function(usersList) {
    return usersList[id].fullname;
  });
}


//example

getUser('bob').done(function(user) {
  //do something with user bob
});

getUserFullName('jane').done(function(fullname) {
  console.log('user jane\'s full name is: ' + fullname);
});