jQuery/ajax - 两个独立的 API 请求，具有组合的结果

Question

晚间互联网世界，

这里的第一篇文章，所以要温柔，到目前为止，我已经从这个网站上学到了很多东西......现在我寻求帮助。

我已经尝试了一些代码的变体，如$when和$then函数中的函数，但我无法得到我想要的结果，它没有组合结果。所以最好在这里问一下并展示我的代码..请帮忙..

.html

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row" id="stats">
<div class="col-4 col-12-large">
<h4><strong>Ether contributed</strong></h4>
<span id="eth_balance" style="font-size: 2.5em;">&mdash;</span>
<!--<p id="total-ether-message" style="font-size:11px;"></p>-->
</div>
<div class="col-4 col-12-large">
<h4><strong>Contributions in USD</strong></h4>
<span id="token_usd" style="font-size: 2.5em;">&mdash;</span>
<!--<p id="total-usd-message" style="font-size:11px;"></p>-->
</div>
<div class="col-4 col-12-large">
<h4><strong>Tokens issued</strong></h4>
<span id="token_amount" style="font-size: 2.5em;">&mdash;</span>
<!-- <p id="total-tokens-message" style="font-size:11px;"></p> -->
</div>
</div>

.js

var token = '0xa74476443119A942dE498590Fe1f2454d7D4aC0d';
var address = '0xda0aed568d9a2dbdcbafc1576fedc633d28eee9a';
$.get("https://api.tokenbalance.com/token/" + token + "/" + address +'', function(data) {
$("#eth_balance").html(Math.round(data.eth_balance).toFixed(2) + " ETH");
$("#token_amount").html(Math.round(data.balance).toFixed(2) + " " + data.symbol);
});
$.get("https://api.etherscan.io/api?module=stats&action=ethprice", function(data) {
$("#token_usd").html("$ " + Math.round(data.result.ethusd).toFixed(2));
// Ideally I'd like to get [ data.result.ethusd x data.eth_balance ] to replace #token_usd, all wrapped in one function
alert(data.result.ethusd)
});

或者你可以在这里玩

https://jsfiddle.net/4zwvo90n/8/

Answer 1

您可以将第二个 ajax 调用移动到第一个调用中，并将data中的值存储在内部函数也可用的变量中。

像这样(第二次调用在这里或小提琴中不起作用)：

var token = '0xa74476443119A942dE498590Fe1f2454d7D4aC0d';
var address = '0xda0aed568d9a2dbdcbafc1576fedc633d28eee9a';
$.get("https://api.tokenbalance.com/token/" + token + "/" + address + '', function (data) {
var eth_balance = data.eth_balance;
$("#eth_balance").html(Math.round(data.eth_balance).toFixed(2) + " ETH");
$("#token_amount").html(Math.round(data.balance).toFixed(2) + " " + data.symbol);
$.get("https://api.etherscan.io/api?module=stats&action=ethprice", function (data) {
$("#token_usd").html("$ " + Math.round(data.result.ethusd * eth_balance).toFixed(2));
// Ideally I'd like to get [ data.result.ethusd x data.eth_balance ] to replace #token_usd, all wrapped in one function
alert(data.result.ethusd)
});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row" id="stats">
<div class="col-4 col-12-large">
<h4>
<strong>Ether contributed</strong>
</h4>
<span id="eth_balance" style="font-size: 2.5em;">&mdash;</span>
<!--<p id="total-ether-message" style="font-size:11px;"></p>-->
</div>
<div class="col-4 col-12-large">
<h4>
<strong>Contributions in USD</strong>
</h4>
<span id="token_usd" style="font-size: 2.5em;">&mdash;</span>
<!--<p id="total-usd-message" style="font-size:11px;"></p>-->
</div>
<div class="col-4 col-12-large">
<h4>
<strong>Tokens issued</strong>
</h4>
<span id="token_amount" style="font-size: 2.5em;">&mdash;</span>
<!-- <p id="total-tokens-message" style="font-size:11px;"></p> -->
</div>
</div>

Answer 2

听起来你要找的是Promise.all()(在vanilla JavaScript中)或$.when()(在jQuery中)。

这是一个更新的jQuery小提琴：https://jsfiddle.net/j5L54100/10/

工作香草版本：https://jsfiddle.net/6Lwo7rs4/8/

在jQuery中：

var promise1 = $.get("https://api.tokenbalance.com/token/" + token + "/" + address);
var promise2 = $.get("https://api.etherscan.io/api?module=stats&action=ethprice");
$.when(promise1, promise2).then(function(p1Data, p2Data) {
// do stuff with the data
}).catch(function (error) {
// error handling
});

香草JS(注意，使用这样的JSON，你还需要response.json()，请参阅小提琴和 https://developer.mozilla.org/en-US/docs/Web/API/Body/json)：

var promise1 = fetch("https://api.tokenbalance.com/token/" + token + "/" + address);
var promise2 = fetch("https://api.etherscan.io/api?module=stats&action=ethprice");
Promise.all([promise1, promise2]).then(function(combinedData) {
// do stuff with the data
}).catch(function (error) {
// error handling
});

基本上发生的事情是$.get和fetch返回承诺(一个表示异步操作状态的对象，带有回调来处理不同的响应，例如success或failure)。when/all本身就是一个承诺，等待它给出的所有承诺的实现或第一个承诺失败。如果给出的承诺成功，它将调用then函数。如果给出的承诺之一失败，它将调用catch函数。

另一种选择是链接请求：

var url1 = "https://api.tokenbalance.com/token/" + token + "/" + address;
var url2 = "https://api.etherscan.io/api?module=stats&action=ethprice";
fetch(url1)
.then(function(data1) {
return fetch(url2);
})
.then(function(data2) {
// do stuff with data1 and data2
})
.catch(function (error) {
// handle errors
});

在 ES6 中看起来很棒：

const url1 = `https://api.tokenbalance.com/token/${token}/${address}`;
const url2 = 'https://api.etherscan.io/api?module=stats&action=ethprice';
fetch(url1)
.then(data1 => fetch(url2))
.then(data2 => /* do stuff with data1 and data2 */)
.catch(error => /* handle errors */);

承诺超级棒，非常令人困惑。我建议在进一步深入研究承诺之前查看获取资源以获得大致想法。

获取： https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

承诺：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise

Promise.all()： https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all

jQuery.when()： https://api.jquery.com/jquery.when/