如何從 API 獲取響應數據並從數據中編碼函數以使用 node 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)
                })
        }
    }

原來是這樣...（哪里不能兌換貨幣但可以得到匯率）無法得到結果，請幫忙

錯誤是說 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