如何在 JavaScript 中的异步函数上实现 memoize 方法?
How can I implement memoize method on an async function in JavaScript?
我一直在尝试在JavaScript中编写memoize函数的实现。我在一个面试问题中被问到这个问题,从那以后我就一直无法忘记它。非常感谢您对此提供帮助。
给定一个函数,我们正在其中进行 API 调用 -
function getSomeData(foo, callback) {
var uri = 'http://localhost?foo=' + foo ;
someAPIUri(uri, function onResponse(error, response, body) {
callback(error, body);
});
}
不使用 API,而是使用 setTimeout 实现异步功能 -
function getSomeData(foo, callback) {
setTimeout(()=> {
console.log('async request');
callback(2 * foo);
}, 1000);
}
如果我们像下面这样调用两次,这意味着进行了两次异步调用,所以我们需要创建一个 memoize 函数来缓存某些输入的响应并在任何后续调用中响应。
getSomeData(1, (response) => {
console.log('getSomeData', response);
})
这个函数是我写的-
function memoize(fn) {
const cache = {};
return async function() {
const args = JSON.stringify(arguments);
console.log('arguments passed to memoize fn: ', args);
console.log('cache data: ', cache[args]);
cache[args] = cache[args] || fn.apply(undefined, arguments);
return cache[args]
}
}
const memoizedGetSomeData = memoize(getSomeData);
const callback_fn = (response) => {
console.log('callback response: ', response);
}
memoizedGetSomeData(1, callback_fn);
memoizedGetSomeData(1, callback_fn);
这不起作用,因为每次 memoizedGetSomeData
调用都会进行异步调用。
我非常感谢您提供一些意见来让它发挥作用并提高我的理解力。
这是代码的代码笔 - link
控制台日志:
"arguments passed to memoize fn: " "{'0':1}"
"cache data: " undefined
"arguments passed to memoize fn: " "{'0':1}"
"cache data: " undefined
"async request"
"callback response: " 2
"async request"
"callback response: " 2
唯一真正的问题(据我所知)是 getSomeData
是一个糟糕的异步功能模拟,因为它没有 return 承诺。
function getSomeData(foo, callback) {
return new Promise((resolve, reject) => {
setTimeout(()=> {
console.log('async request');
resolve(callback(2 * foo));
}, 1000);
});
}
function memoize(fn) {
const cache = {};
return async function() {
const args = JSON.stringify(arguments);
console.log('arguments passed to memoize fn: ', args);
console.log('cache data: ', cache);
cache[args] = cache[args] || fn.apply(undefined, arguments);
return cache[args]
}
}
const memoizedGetSomeData = memoize(getSomeData);
const callback_fn = (response) => {
console.log('callback response: ', response);
}
memoizedGetSomeData(1, callback_fn);
memoizedGetSomeData(1, callback_fn);
感谢@Bergi 和@dave 的评论。我了解我的代码的问题以及 memoize 函数应该如何像异步函数一样工作。
这是在异步函数上基本实现 Memoize
的最终代码 -
function getSomeData(foo, callback) {
return new Promise((resolve, reject) => {
setTimeout(()=> {
console.log('async request');
resolve(callback(2 * foo));
}, 1000);
});
}
function memoize(fn) {
const cache = {};
return async function() {
const args = JSON.stringify(arguments);
cache[args] = cache[args] || fn.apply(undefined, arguments);
return cache[args]
}
}
const memoizedGetSomeData = memoize(getSomeData);
const callback_fn = (response) => {
return response;
}
// this should make async call
memoizedGetSomeData(1, callback_fn).then(response => console.log('response from async call: ', response));
// this should return response from the cache
memoizedGetSomeData(1, callback_fn).then(response => console.log('cached response: ', response));
// this should make async call (different argument)
memoizedGetSomeData(4, callback_fn).then(response => console.log('response from async call: ', response));
日志:
"async request"
"response from async call: " 2
"cached response: " 2
"async request"
"response from async call: " 8
我也更新了Codepen代码。
我一直在尝试在JavaScript中编写memoize函数的实现。我在一个面试问题中被问到这个问题,从那以后我就一直无法忘记它。非常感谢您对此提供帮助。
给定一个函数,我们正在其中进行 API 调用 -
function getSomeData(foo, callback) {
var uri = 'http://localhost?foo=' + foo ;
someAPIUri(uri, function onResponse(error, response, body) {
callback(error, body);
});
}
不使用 API,而是使用 setTimeout 实现异步功能 -
function getSomeData(foo, callback) {
setTimeout(()=> {
console.log('async request');
callback(2 * foo);
}, 1000);
}
如果我们像下面这样调用两次,这意味着进行了两次异步调用,所以我们需要创建一个 memoize 函数来缓存某些输入的响应并在任何后续调用中响应。
getSomeData(1, (response) => {
console.log('getSomeData', response);
})
这个函数是我写的-
function memoize(fn) {
const cache = {};
return async function() {
const args = JSON.stringify(arguments);
console.log('arguments passed to memoize fn: ', args);
console.log('cache data: ', cache[args]);
cache[args] = cache[args] || fn.apply(undefined, arguments);
return cache[args]
}
}
const memoizedGetSomeData = memoize(getSomeData);
const callback_fn = (response) => {
console.log('callback response: ', response);
}
memoizedGetSomeData(1, callback_fn);
memoizedGetSomeData(1, callback_fn);
这不起作用,因为每次 memoizedGetSomeData
调用都会进行异步调用。
我非常感谢您提供一些意见来让它发挥作用并提高我的理解力。
这是代码的代码笔 - link
控制台日志:
"arguments passed to memoize fn: " "{'0':1}"
"cache data: " undefined
"arguments passed to memoize fn: " "{'0':1}"
"cache data: " undefined
"async request"
"callback response: " 2
"async request"
"callback response: " 2
唯一真正的问题(据我所知)是 getSomeData
是一个糟糕的异步功能模拟,因为它没有 return 承诺。
function getSomeData(foo, callback) {
return new Promise((resolve, reject) => {
setTimeout(()=> {
console.log('async request');
resolve(callback(2 * foo));
}, 1000);
});
}
function memoize(fn) {
const cache = {};
return async function() {
const args = JSON.stringify(arguments);
console.log('arguments passed to memoize fn: ', args);
console.log('cache data: ', cache);
cache[args] = cache[args] || fn.apply(undefined, arguments);
return cache[args]
}
}
const memoizedGetSomeData = memoize(getSomeData);
const callback_fn = (response) => {
console.log('callback response: ', response);
}
memoizedGetSomeData(1, callback_fn);
memoizedGetSomeData(1, callback_fn);
感谢@Bergi 和@dave 的评论。我了解我的代码的问题以及 memoize 函数应该如何像异步函数一样工作。
这是在异步函数上基本实现 Memoize
的最终代码 -
function getSomeData(foo, callback) {
return new Promise((resolve, reject) => {
setTimeout(()=> {
console.log('async request');
resolve(callback(2 * foo));
}, 1000);
});
}
function memoize(fn) {
const cache = {};
return async function() {
const args = JSON.stringify(arguments);
cache[args] = cache[args] || fn.apply(undefined, arguments);
return cache[args]
}
}
const memoizedGetSomeData = memoize(getSomeData);
const callback_fn = (response) => {
return response;
}
// this should make async call
memoizedGetSomeData(1, callback_fn).then(response => console.log('response from async call: ', response));
// this should return response from the cache
memoizedGetSomeData(1, callback_fn).then(response => console.log('cached response: ', response));
// this should make async call (different argument)
memoizedGetSomeData(4, callback_fn).then(response => console.log('response from async call: ', response));
日志:
"async request"
"response from async call: " 2
"cached response: " 2
"async request"
"response from async call: " 8
我也更新了Codepen代码。