<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <title>MP3 Music</title>

</head>

<body>
    <div id="container"></div>
    <h1>Подгрузка записей</h1>
    <button onclick="getFeedMusic()">getFeedMusic</button>
    <button onclick="getJsonMusic()">getJsonMusic</button>
    <button onclick="getFetch()">getFetch</button>

    <script>
        // const axios = require('axios');
        let cnt = document.getElementById('container');
        // Make a request for a user with a given ID
        function getFeedMusic() {
            axios.get('./music_html.php')
                .then(function(response) {
                    // handle success
                    cnt.innerHTML = cnt.innerHTML + response.data;
                })
                .catch(function(error) {
                    // handle error
                    alert(error)
                })
                .finally(function() {
                    // always executed
                });
        };

        function getJsonMusic() {
            axios({
                    method: 'get',
                    url: './music_json.php',
                    responseType: 'application/json'
                })
                .then(function(response) {
                    console.log(response.data);
                });
        }

        async function getFetch() {
            const response = await fetch('./music_json.php', {
                method: 'get',
            })
            // .then(function(response){
            //    let prom = response.json()
            let data = await response.json();

            console.log(data)
            // });
        }
    </script>

</body>

</html>