使用 fetch 从 api 接收数据

Question

我正在尝试使用 fetch 从 api 获取信息，api 生成的信息如下：

{"header":{"Request":"Competitions","Timestamp":1624315470},"data":[{"CompCode":"CAEC21","Name":"CAMPEONATO DE ANDALUCIA POR EQUIPOS DE CLUBES","ShortName":"CAMPEONATO DE ANDALUCIA POR EQUIPOS DE CLUBES","Place":"Almer\u00eda","DateFrom":"2021-06-13","DateTo":"2021-06-13"},{"CompCode":"CAAL21","Name":"Campeonatos de Andaluc\u00eda de Aire Libre 2021","ShortName":"Campeonatos de Andaluc\u00eda de Aire Libre 2021","Place":"Huelva","DateFrom":"2021-06-05","DateTo":"2021-06-06"},{"CompCode":"CPAL21","Name":"Campeonato Provincial de Aire Libre Huelva - Absoluto","ShortName":"Campeonato Provincia de Aire Libre Huelva - Absoluto","Place":"Huelva","DateFrom":"2021-05-29","DateTo":"2021-05-30"},{"CompCode":"CPALM21","Name":"Campeonato Provincial de Aire Libre Huelva - Menores","ShortName":"Campeonato Provincial de Aire Libre Huelva - Menores","Place":"Huelva","DateFrom":"2021-05-29","DateTo":"2021-05-29"},{"CompCode":"CAS21","Name":"Campeonato de Andaluc\u00eda en Sala 2021","ShortName":"Campeonato de Andaluc\u00eda en Sala 2021","Place":"Isla Cristina (Huelva)","DateFrom":"2021-01-09","DateTo":"2021-01-10"},{"CompCode":"ent","Name":"Entrenamiento","ShortName":"Entrenamiento","Place":"Huelva","DateFrom":"2021-01-01","DateTo":"2021-12-31"},{"CompCode":"CPSH21","Name":"Campeonato Provincial Sala 2020","ShortName":"Campeonato Provincial Sala 2020","Place":"San Juan (Huelva)","DateFrom":"2020-12-18","DateTo":"2020-12-20"},{"CompCode":"TSM20","Name":"Trofeo Solo Mujeres 2020","ShortName":"Trofeo Solo Mujeres 2020","Place":"Huelva","DateFrom":"2020-10-18","DateTo":"2020-10-18"}]}

我使用以下代码尝试显示数据，但它对我不起作用：

<body>

<div class="container mt-4 shadow-lg p3 mb-5 bg-body rounded">
    <table class="table table-bordered table-striped">
        <thead>
            <tr>
                <th>CODE</th>
                <th>NAME</th>
                <th>PLACE</th>
            </tr>
        </thead>
        <tbody id="data">
        </tbody>

    </table>

</div>


<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>

<script>
    let url = 'http://localhost/api/json/Competitions.php';

    fetch(url,{
        method: "POST",
        body: data
    })
        .then(response => response.json())
        .then(data => mostrarData(data))
        .catch(error => console.log(error))
        
    const mostrarData = (data) => {
        console.log(data)
        let body = ''
        for (let i = 0; i<data.length; i++){
            body += `<tr><td>${data[i].CompCode}</td><td>${data[i].Name}</td><td>${data[i].Place}</td></tr>`                
        }
        document.getElementById('data').innerHTML = body
    }            
</script>

控制台没有显示错误

Answer 1

请将您的方法从 POST 更改为 GET，因为您是从后端获取的。

    const options = {
        method: 'GET',
        headers: {
            'Content-Type': 'application/json',
        },
        credentials: 'include'
    }

    fetch('URL', options)
    .then(response => response.json())
    .then(result => console.log(result))
    .catch(err => console.log(err))

Answer 2

data 一个包含名为数据的数组的对象，因此要访问该数组，您可以使用 data.data.

.then(data => mostrarData(data.data))

使用 fetch 从 api 接收数据

Use fetch to receive data from an api

javascript

fetch