如何在函数中使用fetch？解决控制台返回json原生代码报错

你遇到的问题是因为没有调用json()方法，而是直接引用了方法本身。res.json是函数对象，所以控制台会输出它的原生代码内容，而不是解析后的JSON数据。

修复方法 #

把res => res.json改成res => res.json()，也就是给json加上括号，执行这个解析方法：

<!DOCTYPE html>
<html>
    <style>
        #button {
            width: 250px;
            height: 50px;
            border: 1px solid black;
            text-align: center;
            vertical-align: middle;
            font-size: 32px;
        }
    </style>
    <body>
        <button id="button" type="button" onclick="OnClick()">Show Data</button>
    </body>
    <script>
        function OnClick() {
            fetch('./Data.json')
                .then(res => res.json()) // 这里加上括号调用方法
                .then(data => {
                    console.log(data)
                })
                .catch(err => { // 建议加上错误捕获，处理请求或解析失败的情况
                    console.error('请求或解析出错:', err)
                })
        }
    </script>
</html>

补充说明 #

res.json()是一个异步方法，会返回一个Promise，当它完成后，后续的then回调才能拿到解析后的JSON数据。另外建议加上catch块来捕获请求过程中（比如文件不存在、网络错误）或者JSON解析失败的异常，避免控制台出现未处理的Promise错误。

内容的提问来源于stack exchange，提问作者NewAtJS