javascript - 如何让按钮调用使用 fetch API 的函数

Question

我正在为我正在处理的项目练习使用 fetch API，但在获取按钮来调用使用 fetch API 访问外部 API 的函数时遇到了问题。不断收到“类型错误:无法获取”消息。

const uri = 'https://jsonplaceholder.typicode.com/posts';
    const initDetails = {
        method: 'get',
        headers: {
            "Content-Type": "application/json; charset=utf-8"
        },
        mode: "cors"
    }
    
    function getData() {
        fetch(uri, initDetails)
        .then(response => {
            if (response.status !== 200) {
                console.log('Looks like there was a problem. Status Code: ' +
                response.status);
                return;
            }
    
            console.log(response.headers.get("Content-Type"));
            return response.json();
            }
        )
        .then(myJson => {
            console.log(JSON.stringify(myJson));
        })
        .catch(err => {
            console.log('Fetch Error :-S', err);
        });
    }
    
    window.onload=function() {
        let myButton = document.getElementById("getData");
        myButton.addEventListener('click', getData);
    }

<form>
    <button id='getData'>Get Data</button>
   </form>

Answer 1

您的按钮位于表单内。表单内按钮的默认操作是提交表单，这会重新加载页面并中止获取请求。

或者preventDefault()在表单提交处理程序中，添加 type="button"到 <button>元素，或者(理想情况下，在这种情况下)删除 <form>完全。