JavaScript jQuery 中的两个嵌套 ajax 请求

Question

我的代码有问题。 我想在我的网站上创建一个加密货币排名。 我在一侧使用 API 来获取徽标、符号、索引、价格等。加密货币。 现在我有一个问题，因为这个 API 没有提供足够的信息。 我想使用第二个 API 来获取有关其他值的信息。 但问题是，我如何在嵌套 ajax 请求中做到这一点？ 我使用 foreach 循环来显示加密的值。

var getCurrencyList = function() {
  $.ajax({
    url: 'https://chasing-coins.com/api/v1/top-coins/200',
    dataType: 'json',
    type: 'get',

  }).done(function(res) {

      //here I want use second api call
      $.ajax({
        url: 'https://pro.coinmarketcap.com/api/v1', //Simple link, because you need api key
        dataType: 'json',
        type: 'get',

      }).done(function(res) {
          var data;
          Get res.data
        }
      })

    var dataArray = []; dataArray = Array.from(Object.keys(res), k => res[k]);

    dataArray.forEach((item, index) => {

      var row = document.createElement('tr');

      row.className = 'row-coin';

      row.innerHTML = `
                <th scope='row'>${index}</th>
                <td class='logoNameCoin'><img width='25px ' src='https://chasing-coins.com/api/v1/std/logo/${item.symbol}'/> <p>${item.symbol}</p></td>
                <td><p>$ ${numberRound(item.cap)} </p></td>
                <td><p>$ ${parseFloat(Math.round(item.price * 100) / 100).toFixed(2)}</p></td>
                <td><p>${item.change.hour > 0 ? '<span style="color: green;">' + "+" + item.change.hour + '</span>' : '<span style="color: red;">' + item.change.hour}</span></p></td>
                <td><p>${item.change.day > 0 ? '<span style="color: green;">' + "+" + item.change.day + '</span>' : '<span style="color: red;">' + item.change.day}</span> </p></td>
    <td> // I Need to put data from second request here</td>

      document.querySelector('.loading').style.display = 'none';
      document.querySelector('.table-content').appendChild(row);


    });

  });

}

Answer 1

您必须在“完成功能”中进行处理

var getCurrencyList = function(){
$.ajax({
url: 'https://chasing-coins.com/api/v1/top-coins/200',
dataType: 'json',
type: 'get',

}).done(function(res){


//here I want use second api call
$.ajax({
url: 'https://pro.coinmarketcap.com/api/v1', //Simple link, because you need api key
dataType: 'json',
type: 'get',

}).done(function(res){

var dataArray = [];
dataArray = Array.from(Object.keys(res), k=>res[k]);

dataArray.forEach((item,index) =>{

    var row = document.createElement('tr');



    row.className = 'row-coin';

    row.innerHTML = `
        <th scope='row'>${index}</th>
        <td class='logoNameCoin'><img width='25px ' src='https://chasing- 
    coins.com/api/v1/std/logo/${item.symbol}'/> <p>${item.symbol}</p></td>
        <td><p>$ ${numberRound(item.cap)} </p></td>
        <td><p>$ ${parseFloat(Math.round(item.price * 100) / 100).toFixed(2)}</p> 
    </td>
        <td><p>${item.change.hour > 0 ? '<span style="color: green;">' + "+" + 
   item.change.hour + '</span>' : '<span style="color: red;">' + item.change.hour} 
    </span></p></td>
        <td><p>${item.change.day > 0 ? '<span style="color: green;">' + "+" + 
     item.change.day + '</span>' : '<span style="color: red;">' + item.change.day} 
    </span> </p></td>
       <td> // I Need to put data from second request here</td>

    `

        document.querySelector('.loading').style.display = 'none';
        document.querySelector('.table-content').appendChild(row);


});

});
}
})