javascript - 如何正确使用 fetch .then/.catch 或 async await - Currency Exchanger 示例
问题描述
我目前正在研究货币兑换器（典型的学习执行），并且我有以下代码，其中实际的 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();
})解决方案
只是更新我自己的代码以防万一像我这样的初学者有相同的 q。下面是我如何解决它。
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()推荐阅读
- .net - .Net 核心内存使用情况
- asp.net-mvc - 在 Razor 页面中绑定多个列表项
- angular - PrimeNG 表 - 如何清除代码中的文本过滤器和 p 表
- powershell - Powershell 在远程电脑上执行 some.exe 并输入多行文本
- docker - Traefik 配置未使用 AT&T 连接到手机
- python - 使用 PythonScript 将 Maya 显示层设置为关闭
- numpy - 如何在纯 Python 中创建直方图？
- sql - 如何将数组 json 列中的值提取到 Postgresql 中的多行中？
- reactjs - React Enzyme 测试：找不到 react-redux 上下文值；请确保组件被包裹在一个
- windows - `path %path:"=%` 在批处理文件中有什么作用？