我正在学习 React 并使用数组进行一些 axios api 调用。我做了一个通过coinmarketcap api收集数据的代码来学习。

所以,我的目的是使用硬编码的加密货币 id 数组从 api 获取价格,并将它们推送到价格数组中。但我遇到了价格数组的问题,因为价格都困惑了。我应该按这个顺序得到一个数组

[比特币价格、以太坊价格、stellarprice、rippleprice]

但是当我在浏览器中运行它时,价格是随机出现的,而不是按这个顺序,有时我得到了我的订单,有时却没有。我使用了一个按钮,onClick 调用了 getPrice 方法。有谁知道我的代码出了什么问题?谢谢!

constructor(){ 
    super(); 
 
    this.state = { 
        cryptos:["bitcoin","ethereum","stellar","ripple"], 
        prices:[] 
    }; 
 
    this.getPrice = this.getPrice.bind(this); 
 
} 
 
 
getPrice(){ 
    const cryptos = this.state.cryptos; 
    console.log(cryptos); 
 
    for (var i = 0; i < cryptos.length; i++){        
        const cryptoUrl = 'https://api.coinmarketcap.com/v1/ticker/' + cryptos[i]; 
 
    axios.get(cryptoUrl) 
        .then((response) => { 
            const data = response.data[0]; 
            console.log(data.price_usd); 
 
            this.state.prices.push(data.price_usd); 
            console.log(this.state.prices); 
        }) 
 
        .catch((error) => { 
        console.log(error); 
        });  
    } 
 
} 

请您参考如下方法:

如果你想按照异步调用的顺序接收数据,可以使用 Promise.all ,等待数组的所有 Promise 都被执行并解决,并按照执行顺序返回值。

const cryptos = ['bitcoin', 'ethereum', 'stellar', 'ripple']; 
const arr = []; 
for (var i = 0; i < cryptos.length; i++){        
    const cryptoUrl = 'https://api.coinmarketcap.com/v1/ticker/' + cryptos[i]; 
    arr.push(axios.get(cryptoUrl)); 
} 
 
Promise.all(arr).then((response) => 
  response.map(res => console.log(res.data[0].name, res.data[0].price_usd)) 
).catch((err) => console.log(err)); 


评论关闭
IT虾米网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!