如何从 API 获取响应数据并从数据中编写函数以使用节点 js JavaScript 获取结果

Question

我认为编码搞砸了，因为我还是 node.js、javascript 和 vue 的新手。我做了一个货币转换器，通过从 API 获取数据来获取汇率并在函数中进行了一些计算。在“检查”中，控制台确实获得了所选国家/地区的汇率但没有结果，我的计算是否错误？还是函数中的代码如此混乱？我需要帮助。所以，这是我从头开始的代码：

<h1 id="main-heading">Currency Conversion</h1>
<div id="input-container">
    <span class="input-text">Convert</span>
    <select id="from-currency" v-model="fromCurrency">
        <option value="">Select currency</option>
        <option value="USD">US Dollar (USD)</option>
        <option value="MYR">Malaysia (MYR)</option>
    </select>
    <input type="number" id="from-amount" placeholder="Amount" v-model="fromAmount" />
    <span class="input-text">To</span>
    <select id="to-currency" v-model="toCurrency">
        <option value="">Select currency</option>
        <option value="USD">US Dollar (USD)</option>
        <option value="MYR">Malaysia (MYR)</option>
    </select>
    <button type="button" id="convert-btn" @click="clickConvert()">
        Convert
    </button>

继续..

</div>
<div id="result-container" v-if="convertClicked">
    <h2 id="result" v-if="!loading">
        <span id="from-span">{{ fromAmount }} {{ fromCurrency }}</span> =
        <span id="to-span">{{ result }} {{ toCurrency }}</span>
    </h2>
    <h2 v-else>Loading...</h2>
</div>

继续...

export default {
name: 'Index',
components: {
},
data() {
    return {
        fromCurrency: '',
        toCurrency: '',
        fromAmount: 0,
        result: '',
        convertClicked: false,
        loading: false,
    }
},

函数...

methods: {
    clickConvert() {
        if (!(this.fromCurrency == '' || this.toCurrency == '' || (this.fromAmount <= 0) || this.fromCurrency == this.toCurrency)) {
            this.convertClicked = true
        }
        this.convert()
    },

功能继续...

convert() {
        if (this.fromCurrency == '' || this.toCurrency == '' || (this.fromAmount <= 0) || this.fromCurrency == this.toCurrency) {
            alert("Please check your inputs and try again")
        } else {
            this.loading = true
            let uri = 'https://api.exchangeratesapi.io/latest?symbols=' + this.fromCurrency + "," + this.toCurrency;
            fetch(uri, {
                    "method": "GET",
                })
                .then((response => response.json()))
                .then(function (data) {
                    console.log(data.rates)
                    for (let [key, value] of Object.entries(data.rates))
                        var jsResult = data.rates;
                    var toCurrency = response.json(this.toCurrency);
                    var fromCurrency = response.json(this.fromCurrency);
                    var fromAmount = response.json(this.fromAmount);
                    var result = this.result;
                    var oneUnit = jsResult.toCurrency / jsResult.fromCurrency;
                    result = (oneUnit * fromAmount).toFixed(2);
                    this.loading = false
                })
                .catch(err => {
                    alert("There was a problem fetching the results. Please try again." + err)
                })
        }
    }

原来是这样的……（这里不能兑换货币但可以得到汇率） cannot get the result, pls help

错误说是ReferenceError: response is not defined。

Answer 1

您的承诺链的第二部分将丢失this 的上下文，因为您尝试在这里使用它。

                .then(function (data) {
                    console.log(data.rates)
                    for (let [key, value] of Object.entries(data.rates))
                        var jsResult = data.rates;
                    var toCurrency = response.json(this.toCurrency);
                    var fromCurrency = response.json(this.fromCurrency);
                    var fromAmount = response.json(this.fromAmount);
                    var result = this.result;
                    var oneUnit = jsResult.toCurrency / jsResult.fromCurrency;
                    result = (oneUnit * fromAmount).toFixed(2);
                    this.loading = false
                })

您可以在convert() 函数的范围内重新定义this 并使用新变量，或者在此处将您的函数调整为箭头函数，这将保留this 的上下文。后一种选择当然是更简单更好的选择。

.then((data) => {
    ...

您可以在此处查看有关箭头功能和上下文的更多信息：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions