axios基本使用

喜欢ヅ旅行 2023-06-17 09:54 20阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>axios基本使用</title>
    </head>
    
    <body>
        <div>
            <button onclick="testGet()">GET请求</button>
            <button onclick="testPOST()">POST请求</button>
            <button onclick="testPUT()">PUT请求</button>
            <button onclick="testDELETE()">DELETE请求</button>
    
        </div>
    </body>
    <script src="https://cdn.bootcss.com/axios/0.19.0/axios.min.js"></script>
    <script>
        //指定默认配置
        axios.defaults.baseURL = 'http://localhost:3000'
    
        // GET：从服务器端读取数据
        function testGet() {
            // axios.get('http://localhost:3000/posts')//这个是REST接口，获取数组
            axios({
                url: '/posts',
                method: 'GET',
            })
                .then(function (response) {
                    console.log(`/posts`, response.data);
                })
                .catch(function (error) {
                    console.log(error);
                });
        }
        // POST：向服务器端添加新数据,效果在db.json文件里面查看
        function testPOST() {
            // axios.post('/posts', {
            //     title: 'post测试',
            //     author: 'Flintstone'
            // })
            axios({
                url: '/posts',
                method: 'POST',
                data: { title: 'post测试', author: 'Flintstone' }
            })
                .then(function (response) {
                    console.log(`/posts`, response);
                })
                .catch(function (error) {
                    console.log(error);
                });
        }
        // PUT：更新服务器端已经存在的数据,效果在db.json文件里面查看
        function testPUT() {
            // axios.put('http://localhost:3000/posts/4', {
            //     title: 'post测试已被put更新',
            //     author: 'Flintstone'
            // })
            axios({
                url: '/posts/16',
                method: 'PUT',
                data: {
                    title: '测试数据已被put更新',
                    author: 'Flintstone'
                }
            })
                .then(function (response) {
                    console.log(`/posts`, response);
                })
                .catch(function (error) {
                    console.log(error);
                });
        }
        //DELETE：删除服务器端数据,效果在db.json文件里面查看
        function testDELETE() {
            // axios.delete('http://localhost:3000/posts/4', {
            //     title: 'post测试已被put更新',
            //     author: 'Flintstone'
            // })
            axios({
                url: '/posts/6',
                method: 'DELETE',
            })
                .then(function (response) {
                    console.log(`/posts`, response);
                })
                .catch(function (error) {
                    console.log(error);
                });
        }
    </script>
    
    </html>