如何正確使用 fetch .then/.catch 或 async await - Currency Exchanger 示例

Question

我目前正在研究貨幣兌換器（典型的學習執行），並且我有以下代碼，其中實際的currencyObj 應該是來自保存在那里的 apiUrl 的獲取請求。

真的很困惑我應該在哪里調用 fetch 所以我的代碼就像處理當前對象一樣工作。

請幫忙？

 const apiUrl = 'https://api.currencyfreaks.com/latest?apikey=e4e6767e5e13430c8cd63326eb5e3fb3'; const currencyObj = { date: "2020-11-16 00:06:00+00", base: "USD", rates: { FJD: 2.1025, MXN: 20.336349, STD: 20916.771033, LVL: 0.656261, SCR: 20.85, CDF: 1966.0, BBD: 2.0, GTQ: 7.786253, CLP: 767.1, HNL: 24.3, UGX: 3696.82168, ZAR: 15.526441, TND: 2.7505, CUC: 1.000669, BSD: 1.0, SLL: 10085.707955, SDG: 55.325, IQD: 1190.0, CUP: 26.5, GMD: 51.79, TWD: 28.5, RSD: 99.34, DOP: 58.508651, KMF: 416.150217, BCH: 0.004048582995951417, MYR: 4.123, FKP: 0.756372, XOF: 553.686228, GEL: 3.29, BTC: 0.00006255436365166103, UYU: 42.850636, MAD: 9.141451, CVE: 93.4, TOP: 2.301076, AZN: 1.7025, OMR: 0.384976, PGK: 3.517495, KES: 109.213333, SEK: 8.668586, BTN: 74.664275, UAH: 28.13259, GNF: 9807.883035, ERN: 15.000453, MZN: 73.787512, SVC: 8.752042, ARS: 79.658459, QAR: 3.641, IRR: 21000.0, MRO: 357.0, XPD: 0.00042846, CNY: 6.6064, THB: 30.127423, UZS: 10380.0, XPF: 100.726636, MRU: 38.3745, BDT: 84.876019, LYD: 1.364025, BMD: 1.0, KWD: 0.3057, PHP: 48.107638, XPT: 0.00111421, RUB: 77.447967, PYG: 7035.735189, ISK: 136.804655, JMD: 148.13708, COP: 3635.333906, MKD: 52.154673, USD: 1.0, DZD: 129.0, PAB: 1.0, GGP: 0.756372, SGD: 1.346778, ETB: 37.75, JEP: 0.756372, ETC: 0.19727756954034326, KGS: 84.310146, SOS: 583.0, VEF: 248487.642241, VUV: 112.108539, LAK: 9280.0, ETH: 0.002227742072022901, BND: 1.349464, ZEC: 0.016342539630658605, ZMK: 5253.075255, XAF: 553.686228, LRD: 159.0, XAG: 0.04048747, CHF: 0.912085, HRK: 6.398472, ALL: 104.723123, DJF: 178.114046, VES: 535099.0, ZMW: 20.915079, TZS: 2320.123553, VND: 23120.946118, XAU: 0.00052895, DASH: 0.01331416094157746, AUD: 1.370784, ILS: 3.36845, GHS: 5.835288, GYD: 209.014465, KPW: 900.062, BOB: 6.89835, KHR: 4065.0, MDL: 17.128284, IDR: 14128.324, KYD: 0.833552, XRP: 3.702332469455757, AMD: 481.616228, BWP: 11.203597, SHP: 0.756372, TRY: 7.65, LBP: 1512.4119, TJS: 11.332955, JOD: 0.709, AED: 3.672967, HKD: 7.75339, RWF: 988.13928, EUR: 0.844089, LSL: 15.51, DKK: 6.288475, CAD: 1.31185, BGN: 1.652696, MMK: 1295.627668, MUR: 39.85, NOK: 9.139229, SYP: 1257.5, IMP: 0.756372, GIP: 0.756372, RON: 4.12002, LKR: 184.739147, NGN: 382.463, CRC: 614.369829, CZK: 22.312, PKR: 158.375, XCD: 2.70255, ANG: 1.79587, HTG: 64.080901, LTC: 0.016030779095864058, BHD: 0.377045, KZT: 430.244954, SRD: 14.154, SZL: 15.51, LTL: 3.224845, SAR: 3.7505, TTD: 6.788463, YER: 250.324978, MVR: 15.4, AFN: 77.020217, INR: 74.5379, AWG: 1.8, KRW: 1108.003452, NPR: 119.46311, JPY: 104.6705, MNT: 2849.392271, AOA: 666.396, PLN: 3.785677, GBP: 0.756372, SBD: 8.101947, BYN: 2.566859, HUF: 302.753256, XLM: 12.4741162088666, BYR: 25668.59, BIF: 1937.540488, MWK: 761.15932, MGA: 3956.383963, XDR: 0.704679, EOS: 0.4003202562049639, BZD: 2.016661, BAM: 1.655785, EGP: 15.623378, MOP: 7.99045, NAD: 15.51, NIO: 34.875, PEN: 3.6435, NZD: 1.454738, WST: 2.610655, TMT: 3.51, BRL: 5.462189 } } // iterate to push on select options const currencies = [] for (const currency in currencyObj.rates){ currencies.push(currency); } // painting HTML File const body = document.getElementsByTagName("body")[0]; const containerDiv = document.createElement("div"); containerDiv.className='container'; body.appendChild(containerDiv) containerDiv.innerHTML = ` <label for="quantity">¿Cuanto dinero quieres cambiar?</label> <input type="number" id="quantity" name="quantity" min="1" max="100000000"> <label for="ogCurrency">¿Qué moneda tienes?</label> <select name="ogCurrency" id="ogCurrency"> </select> <label for="endCurrency">¿A qué moneda quieres cambiar?</label> <select name="endCurrency" id="endCurrency"> </select> <button id="exchange-button">Convertir</button> <h2 class="message"></h2> ` const ogCurrencySelect = document.getElementById("ogCurrency"); const endCurrencySelect = document.getElementById("endCurrency"); const quantityInput = document.getElementById("quantity"); const message = document.querySelector('.message'); const exchangeButton = document.getElementById('exchange-button') // writing currencies in both selects for (let i = 0; i < currencies.length; i++) { let option = document.createElement("option"); option.setAttribute("value", currencies[i]); option.text = currencies[i]; ogCurrencySelect.appendChild(option); } for (let i = 0; i < currencies.length; i++) { let option = document.createElement("option"); option.setAttribute("value", currencies[i]); option.text = currencies[i]; endCurrencySelect.appendChild(option); } exchangeButton.addEventListener('click', ()=>{ ogCurrencySelect.addEventListener('change', calculate); endCurrencySelect.addEventListener('change', calculate); quantityInput.addEventListener('change', calculate) function exchange (ogCurrency, endCurrency, amount){ } function calculate() { const from_currency = ogCurrencySelect.value; const to_currency = endCurrencySelect.value; const amount = quantityInput.value; const baseValue = currencyObj.rates[currencyObj.base]; const ogCurrencyValue = currencyObj.rates[from_currency]; const endCurrencyValue = currencyObj.rates[to_currency]; const baseAmount = (amount * baseValue) / ogCurrencyValue; const endAmount = ((baseAmount * endCurrencyValue) / baseValue).toFixed(2); message.innerText = `Tu cambio de ${amount} ${from_currency} son ${endAmount} ${to_currency}` } calculate(); })

Answer 1

只是更新我自己的代碼以獲得證詞，以防像我這樣的初學者有相同的問題。 這是我如何解決的。

 const apiUrl = 'https://api.currencyfreaks.com/latest?apikey=e4e6767e5e13430c8cd63326eb5e3fb3'; const getCurrencies = async() => { const response = await fetch(apiUrl) const data = await response.json() const currencies = Object.keys(data.rates) // painting HTML File const body = document.getElementsByTagName("body")[0]; const containerDiv = document.createElement("div"); containerDiv.className='container'; body.appendChild(containerDiv) containerDiv.innerHTML = ` <label for="quantity">¿Cuanto dinero quieres cambiar?</label> <input type="number" id="quantity" name="quantity" min="1" max="100000000"> <label for="ogCurrency">¿Qué moneda tienes?</label> <select name="ogCurrency" id="ogCurrency"> </select> <label for="endCurrency">¿A qué moneda quieres cambiar?</label> <select name="endCurrency" id="endCurrency"> </select> <button id="exchange-button">Convertir</button> <h2 class="message"></h2> ` // selecciono los elementos del html que me van a servir const ogCurrencySelect = document.getElementById("ogCurrency"); const endCurrencySelect = document.getElementById("endCurrency"); const quantityInput = document.getElementById("quantity"); const message = document.querySelector('.message'); const exchangeButton = document.getElementById('exchange-button') // creo y escribo en el hml las options del select de og y de end for (let i = 0; i < currencies.length; i++) { let option = document.createElement("option"); option.setAttribute("value", currencies[i]); option.text = currencies[i]; ogCurrencySelect.appendChild(option); } for (let i = 0; i < currencies.length; i++) { let option = document.createElement("option"); option.setAttribute("value", currencies[i]); option.text = currencies[i]; endCurrencySelect.appendChild(option); } // elijo el valor del elemento para pintarlo en el html exchangeButton.addEventListener('click', ()=>{ ogCurrencySelect.addEventListener('change', calculate); endCurrencySelect.addEventListener('change', calculate); quantityInput.addEventListener('change', calculate) function exchange (ogCurrency, endCurrency, amount){ } function calculate() { const from_currency = ogCurrencySelect.value; const to_currency = endCurrencySelect.value; const amount = quantityInput.value; // aqui iria el then?? const baseValue = data.rates[data.base]; const ogCurrencyValue = data.rates[from_currency]; const endCurrencyValue = data.rates[to_currency]; const baseAmount = (amount * baseValue) / ogCurrencyValue; const endAmount = ((baseAmount * endCurrencyValue) / baseValue).toFixed(2); message.innerText = `Tu cambio de ${amount} ${from_currency} son ${endAmount} ${to_currency}` } calculate(); }) } getCurrencies()