我正在尝试在使用 fetch API 的异步函数中链接承诺，但它不起作用

Question

我正在建立一个网站，使用 API 实时显示比特币价格。问题是我试图确定价格是高还是低，所以我为此设置了算法然后是三分之一。这是我的代码：

async function pageReload() {
    const showPrice = document.getElementById("bitcoin");
    await fetch('********', options)
        .then(response => response.json())
        .then(response => {
            console.log(response);
            let pastValue = parseInt(response["Realtime Currency Exchange Rate"]["8. Bid Price"], 10);
            showPrice.innerHTML = pastValue;
        })
        .then((response) => {
            let pastValue1 = parseInt(response["Realtime Currency Exchange Rate"]["8. Bid Price"], 10);
            let current = null;
            if (current > pastValue1) {
                current = pastValue1;
                console.log('e mai mare');
            } else if (current == pastValue1) {
                current = pastValue1;
                console.log("e egal");

            } else if (current < pastValue1) {

                console.log("current este " + current + ' pastValue este' + pastValue)
                current = pastValue1;
                console.log("e mai mic");
                showPrice.style.color = 'red';
            }
        })


    .catch(err => console.error(err));



}

const timer = setInterval(pageReload, 20000);
setInterval();

起初我把算法放在第二个然后但是两个变量得到相同的数字而不是 'current' 之前得到的数字。这是我从浏览器收到的错误：

Answer 1

这部分代码：

.then(response => {
    console.log(response);
    let pastValue = parseInt(response["Realtime Currency Exchange Rate"]["8. Bid Price"], 10);
    showPrice.innerHTML = pastValue;
})
.then((response) => {
    let pastValue1 = parseInt(response["Realtime Currency Exchange Rate"]["8. Bid Price"], 10);
    let current = null;
    if (current > pastValue1) {
        current = pastValue1;
        console.log('e mai mare');
    } else if (current == pastValue1) {
        current = pastValue1;
        console.log("e egal");

    } else if (current < pastValue1) {

        console.log("current este " + current + ' pastValue este' + pastValue)
        current = pastValue1;
        console.log("e mai mic");
        showPrice.style.color = 'red';
    }
})

您必须从这部分代码中的第一个 .then() 开始 return response，或者您必须在此处删除第二个 .then()，因为它不需要因为第一个 .then() 中没有异步操作。因为你没有做 return response，所以当你尝试这样做时：

parseInt(response["Realtime Currency Exchange Rate"]["8. Bid Price"]

response 将是 undefined.

此外，您的 current 值总是重置为 null，然后将 pastValue 与 null 进行比较，结果始终相同。我猜您希望 current 从一个调用保留到下一个调用，以便您可以与之进行比较。为此，您必须在此函数外部声明它，以便它在一次调用到下一次调用后仍然存在。

不混合 await 和 .then() 也简单得多。如果您使用 await，只需使用它而不是 .then()，并使用 try/catch 而不是 .catch()。

以下是我的建议：

// declare current here so it is retained from one function call to the next
let current = 0;

async function pageReload() {
    try {
        const showPrice = document.getElementById("bitcoin");
        let response = await fetch('********', options);
        let data = await response.json();
        console.log(data);
        let pastValue = parseInt(data["Realtime Currency Exchange Rate"]["8. Bid Price"], 10);
        showPrice.innerHTML = pastValue;
        if (current > pastValue) {
            console.log('e mai mare');
        } else if (current == pastValue) {
            console.log("e egal");
        } else if (current < pastValue) {
            console.log("current este " + current + ' pastValue este' + pastValue)
            console.log("e mai mic");
            showPrice.style.color = 'red';
        }
        current = pastValue;
    } catch(e) {
        console.log(e);
    }
}

const timer = setInterval(pageReload, 20000);
setInterval();

您的 if/elseif/elseif 似乎还缺少一些逻辑，因为除了最后一个，他们所做的只是在做 console.log()。您不想在那些 if/else 分支中修改页面吗？

我正在尝试在使用 fetch API 的异步函数中链接承诺，但它不起作用

I am trying to chain promises in an async function working with fetch API but it does not work

promise

async-await

fetch-api