显示来自 api 在 JavaScript 的响应值

Question

我正在尝试在 JavaScript 中创建一个计算器。在这个计算器中，我有一个按钮可以将用户输入的数字转换为美元。我有一个带钥匙的 api，但不知何故我无法在计算器上显示结果。

case 'convert':
            let eur = parseFloat(num)
            console.log(eur)
            const url = 'https://v6.exchangerate-api.com/v6/my-api-key/pair/EUR/USD/' + eur
            fetch(url)
                .then(response => response.json())
            let converted = JSON.parse(response.json())
            display.value = converted
            num = 0
            break

Answer 1

方法一：

您可以通过等待 API 请求来异步调用您的函数

let response = await fetch(url);
let converted = JSON.parse(response.json())
display.value = converted

方法二：

将您的解析代码移到 API 响应中，并获取转换后的值并将其设置为显示字段

Answer 2

您遇到的第一个问题是您没有正确处理 API 结果。

response 仅存在于您的 Promise 回调中。在 converted 变量的初始化中， response 未定义。以下至少应该成功地为您提供 API 中的数据，然后您可以将其用于显示。此外，在获取 Response 时调用 .json() 已经将 HTTP 正文转换为 JSON，因此无需使用 JSON.parse().

再次解析它

fetch('https://v6.exchangerate-api.com/v6/my-api-key/pair/EUR/USD/4')
    .then(response => response.json())
    .then((responseData) => {
        console.log(responseData);
        display.value = responseData;
    });

由于您没有提供有关 display.value 背后的信息，您可能会遇到更多问题。另外，我希望你已经认识到这个 API 的 API 键是必需的，而你的 URL 只是说 'my-api-key'.

显示来自 api 在 JavaScript 的响应值

Display value of a response from an api at JavaScript

javascript

api

json