如何使用Axios数据请求显示数据？

Question

你好，我正在关注一个youtube视频，关于如何使BTC价格跟踪器与电子，我遇到了一个问题。我找到了让它工作的解决方案，但我只想被指向正确的方向，以进一步理解为什么这是解决方案。我将在下面提供我的原始尝试和正确的解决方案。

    function getBTC() {

// var strr = [];

axios.get('https://min-api.cryptocompare.com/data/price?fsym=BTC&tsyms=USD')
.then(function(response){
    // strr.push(response.data);
    console.log(response.data);
    // const cryptos = strr

    // price.innerHTML = '$' + cryptos.toLocalString('en');
})
.then(res => {
    // const cryptos = res.data
    const cryptos = res.data.BTC.USD
    price.innerHTML = '$'+cryptos.toLocaleString('en')
})

    }

以下是正确的解决方案。

    function getBTC() {
    axios.get('https://min-api.cryptocompare.com/data/pricemulti?fsyms=BTC&tsyms=USD')
    .then(res => {
        const cryptos = res.data.BTC.USD
        price.innerHTML = '$'+cryptos.toLocaleString('en')
    })
}cryptos = res.data.BTC.USD
    price.innerHTML = '$'+cryptos.toLocaleString('en')
})
    }

我可以访问数据，它在控制台中显示正确，但在应用程序窗口中不能正确更新。再一次，我只是寻找一些澄清，为什么第二个代码是正确的工作，谢谢！

Answer 1

你的两个解决方案都不是完美的，你可能有一些你没有注意到的错误。

在第一个解决方案中，您忘记了将值return给下一个then回调函数。因为您在第一个then中没有返回任何值，所以第二个then中的res变量为undefined。在then回调中return一个值是非常重要的，否则下一个then回调就没有要处理的值了。我建议你在Promise中阅读一下是如何工作的。

在第二种解决方案中，您的代码可以在此段中正常运行。

function getBTC() {
    axios.get('https://min-api.cryptocompare.com/data/pricemulti?fsyms=BTC&tsyms=USD')
    .then(res => {
        const cryptos = res.data.BTC.USD
        price.innerHTML = '$'+cryptos.toLocaleString('en')
    })
}

之后的所有内容都应该在控制台中抛出一个错误，因为res在then方法的作用域之外不可用。并且上述示例之后的代码在语法上是不正确的。

Answer 2

在第一种情况下，第一个.then()不会返回Promise (实际上也不会返回任何内容)，因此第二个.then()不会接收任何作为参数的内容(res为undefined)。

在第二种情况下，所有操作都在定义response的第一个.then()块中完成。

Answer 3

我想是因为你使用了两次带响应参数的函数，但在第一种情况下，它是一个正则函数，在第二种情况下，它可能是一个箭头函数，这就是我希望这是有帮助的地方。