Question

晚间互联网世界，

首先发帖在这里温柔，到目前为止我从这个网站上学到了很多东西......现在我寻求帮助..

我尝试了一些代码，例如$ when＆amp; $ 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
});

Vanilla 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返回promises（一个表示异步操作状态的对象，其回调处理不同的响应，例如{{1 }或success）。 failure / when本身就是一个等待履行所有承诺或承诺失败的承诺。如果它给出的承诺成功，则调用all函数。如果其中一个承诺失败，则会调用then函数。

另一个选择是链接请求：

catch

在ES6中看起来很棒：

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
  });

承诺超级棒，令人困惑。我建议在进一步深入承诺之前，先查看获取资源以获得一般性的想法。

抓取：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/

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

2 个答案: