重新绘制用户操作数据-Vanilla JS

Question

我有以下代码，用于从多个源获取数据：

// Utility function that gets JSON with appropriate HTTP check
function fetchJSON(...args) {
return fetch(...args)
.then(response => {
if (!response.ok) {
throw new Error(`HTTP error ${response.status}`);
}
return response.json();
});
}
// Utility functon for repeated JSON requests that you can cancel when needed
function startRepeatJSONRequest({url, options = undefined, callback, signal, interval = null}) {
function doRequest() {
fetchJSON(url, {...options, signal})
.then(data => {
if (!signal.aborted) {
callback(data);
}
})
.catch(error => {
// ...handle/report error...
})
.finally(() => {
if (!signal.aborted && interval !== null) {
setTimeout(doRequest, interval);
}
});
}
doRequest();
}
// Repeated requests for API A
const controllerA = new AbortController();
startRepeatJSONRequest({
url: "https://example.com/request/A",
callback(data) {
// ...use `data` here...
},
signal: controllerA.signal,
interval: 3000, // or whatever
});
// Repeated requests for API B
const controllerB = new AbortController();
startRepeatJSONRequest({
url: "https://example.com/request/A",
callback(data) {
// ...use `data` here...
},
signal: controllerB.signal,
interval: 5000, // or whatever
});

这非常适合我的用例，在我的用例中，我必须从不同频率的不同来源获取。

当我尝试更新获取的URL时，问题就开始了。我首先使用一个变量来设置url的一部分，这样我以后就可以对其进行操作，如下所示：

var money = usd;
url: 'https://api.coingecko.com/api/v3/coins/markets?vs_currency=' + money + '&order=market_cap_desc&per_page=10&page=1&sparkline=true',

一切正常，我用按钮更改变量，但是当settimeout允许函数再次获取数据时，它不会从更新的新URL中获取数据，我已经将货币从例如usd设置为eur，而是使用加载页面时最初设置的URL。

我该如何做到这一点？

Answer 1

让我们看看这个例子：

var money = "usd";
startRepeatJSONRequest({
url: "https://example.com/request/" + money,
callback(data) {
// ...use `data` here...
},
signal: controllerB.signal,
interval: 5000, // or whatever
}); 
money.value = "eur";

在本例中，它将始终提取https://example.com/request/usd而不是https://example.com/request/eur，因为url是基元数据类型；

一个解决方案可以将其作为参考：

var url = {
base: "https://example.com/request/",
value: "usd"
}
startRepeatJSONRequest({
url: url,
callback(data) {
// ...use `data` here...
},
signal: controllerB.signal,
interval: 5000, // or whatever
});
url.value = "eur"

你还应该更改你的startRepeatJSONRequest，因为url是一个对象，所以它变成了

fetchJSON(url.base + url.value, {...options, signal})

在这里工作js小提琴：https://jsfiddle.net/m0daxqv6/

这里有一个很好的教程基本体与参考

干杯，Kalik1