我有以下精简代码来获取随机数并在UI上显示:

<script>
    let promise = getRandomNumber();

    async function getRandomNumber() {
        const res = await fetch(`tutorial/random-number`);
        const text = await res.text();

        if (res.ok) {
            return text;
        } else {
            throw new Error(text);
        }
    }

    function handleClick() {
        promise = getRandomNumber();
    }
</script>

<button on:click={handleClick}>
    generate random number
</button>

{#await promise}
    <p>...waiting</p>
{:then number}
    <p>The number is {number}</p>
{:catch error}
    <p style="color: red">{error.message}</p>
{/await}


我从以下代码中获取了此代码:https://svelte.dev/examples#await-blocks

api调用有时可能会失败,并且在UI中显示错误为:


  无法生成随机数。请再试一遍


这样做时,它还会在控制台中将API的状态代码打印为:

javascript - API调用失败时,在浏览器控制台中显示错误是否不好?-LMLPHP

现在,我想知道在UI中显示此类错误是否是个坏主意?如果是这样,如何避免显示这些错误?我认为这是凭空完成的。如果我们应该避免在控制台中发生任何类型的错误,那么编写这部分代码的最佳方法是什么,以便我也可以使用svelte await。

最佳答案

这种类型的错误是由浏览器本身控制的,因此您将无法删除它。
您必须找出导致此错误的原因。

并且,是的,您应该避免在控制台中显示错误和消息。您应该在UI中显示这些错误。

关于javascript - API调用失败时,在浏览器控制台中显示错误是否不好?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/57865299/

10-09 23:58
查看更多