使用axios请求接口REST接口（实现GET、POST、PUT、DELETE方式的接口请求）

秒速五厘米 2023-06-16 07:52 163阅读 0赞

### 使用axios请求接口REST接口：           1.首先你要拥有（了解）json-server这个包，因为我是基于这个包来写的           （往期文章链接地址：https://blog.csdn.net/JEFF\_luyiduan/article/details/103226648）； ###

###            2.开启对db.json文件的监听之后就不要关闭了，然后你在该目录的根目录下面新建一个文件夹           （我的新建的是test文件夹，图片如下）； ###

### ![20191125104411594.png][] ###

###            3.现在我需要引入axios的压缩包链接（推荐个快速找到cdn的网站：https://www.bootcdn.cn/），           输入框里面输入axios就可以查找到了（图片如下）； ###

### ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pFRkZfbHV5aWR1YW4_size_16_color_FFFFFF_t_70][] ###

### ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pFRkZfbHV5aWR1YW4_size_16_color_FFFFFF_t_70 1][] ###

###            4.其它的一些代码，及效果展示，请看我的截图： ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pFRkZfbHV5aWR1YW4_size_16_color_FFFFFF_t_70 2][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pFRkZfbHV5aWR1YW4_size_16_color_FFFFFF_t_70 3][]

--------------------

### 实现GET、POST、PUT、DELETE方式的接口请求： ###

<!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>Document</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>
        // GET：从服务器端读取数据
        function testGet() {
            axios.get('http://localhost:3000/posts')//这个是REST接口，获取数组
                // axios.get('http://localhost:3000/posts/1')//这个是REST接口，获取对象
                .then(function (response) {
                    console.log(`/posts`, response.data);
                })
                .catch(function (error) {
                    console.log(error);
                });
        }
        // POST：向服务器端添加新数据,效果在db.json文件里面查看
        function testPOST() {
            axios.post('http://localhost:3000/posts', {
                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'
            })
                .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'
            })
                .then(function (response) {
                    console.log(`/posts`, response);
                })
                .catch(function (error) {
                    console.log(error);
                });
        }
    </script>
    
    </html>

[20191125104411594.png]: https://img-blog.csdnimg.cn/20191125104411594.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pFRkZfbHV5aWR1YW4_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/2019112510441956.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pFRkZfbHV5aWR1YW4=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pFRkZfbHV5aWR1YW4_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191125104433310.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pFRkZfbHV5aWR1YW4=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pFRkZfbHV5aWR1YW4_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20191125110459230.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pFRkZfbHV5aWR1YW4=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pFRkZfbHV5aWR1YW4_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20191125110501859.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pFRkZfbHV5aWR1YW4=,size_16,color_FFFFFF,t_70