【Vue】五、Vue.js之Axios

北城小林

已于 2023-01-02 14:50:22 修改

阅读量212

点赞数

分类专栏： 09_前端文章标签： vue.js javascript 前端

于 2022-12-24 17:45:38 首次发布

本文链接：https://blog.csdn.net/weixin_43333483/article/details/128429772

版权

09_前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

后端程序员的vue学习之路

一、Axios

一、Axios

我们只是在静态页面使用Vue.js，不涉及从后端接口获取数据动态渲染页面，而在实际项目开发中，通常需要前后端结合来实现页面的渲染，前端负责页面展示和交互，后端负责数据的存储和获取，这就会使用到ajax技术请求从后端接口获取数据；
Vue.js，包括React.js都推荐使用 axios 来完成 ajax 请求；
axios 是一个基于 Promise的HTTP库，可以用在浏览器和node.js中；
Github开源地址：https://github.com/axios/axios

中文文档：https://axios-http.com/zh/docs/intro

1、安装方法

1、直接下载js文件

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

3、使用npm:

$ npm install axios

2、GET 方法

普通请求

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>test13</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>

<body>
    <div id="app">
        {{ info }}
    </div>

    <script type="text/javascript">
        new Vue({
            el: '#app',
            data() {
                return {
                    info: null
                }
            },
            mounted() {
                axios
                    .get('http://localhost:8080/info')//请求远程接口，那么这里会有跨域的问题
                    .then(response => (this.info = response))
                    .catch(function (error) {//请求失败处理
                        console.log(error);
                    });

                // axios
                //     .get('http://localhost:8080/info')//请求远程接口，那么这里会有跨域的问题
                //     .then(response => {
                //         this.info = response
                //         console.log(a);
                //     })
                //     .catch(error => {//请求失败处理
                //         console.log(error);
                //     });
            }
        })
    </script>
</body>

</html>

async 请求

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>test14</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>

<body>
    <div id="app">
        {{ info }}
    </div>

    <script type="text/javascript">
        new Vue({
            el: '#app',
            data() {
                return {
                    info: null
                }
            },
            mounted() {
                // axios.get('http://localhost:8080/user?id=12345')
                //     .then(response => {
                //         this.info = response
                //         console.log(response);
                //     }).catch(error => {
                //         console.log(error);
                //     })

                // axios.get('http://localhost:8080/user', {
                //         params: {
                //             id: 12345,
                //             name: "cat"
                //         }
                //     }).then(response => {
                //         this.info = response
                //         console.log(response);
                //         console.log(a)
                //     }).catch(error => {
                //         this.info = error
                //         console.log(error);
                //     })

                //async/await是ECMAScript 2017的一部分，在Internet Explorer和旧浏览器中不受支持，因此请谨慎使用；
                async function getUser() {
                    try {
                        console.log("000");
                        const response = await axios.get('http://localhost:8080/user?id=12345');
                        console.log(response);
                        this.info = response
                        console.log("111");
                    
                    } catch (error) {
                        console.error(error);
                    }
                    console.log("333");
                }
                
                //调用
                getUser()
            }
        })
    </script>
</body>

</html>

3、Post请求方法代码示例

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>test15</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>

<body>
    <div id="app">
        {{ info }}
    </div>

    <script type="text/javascript">
        new Vue({
            el: '#app',
            data() {
                return {
                    info: null
                }
            },
            mounted() {
                // axios.post('http://localhost:8080/user')
                //     .then((response) => {
                //         this.info = response
                //         console.log(response);
                //     }).catch((error) => {
                //         console.log(error);
                //     });

                axios.post('http://localhost:8080/user2', {
                        id: 123,
                        name: 'cat'
                    }).then((response) => {
                        this.info = response
                        console.log(response);
                    })
                    .catch((error) => {
                        console.log(error);
                    });
            }
        })
    </script>
</body>

</html>

2、delete.put等其他请求方法

axios.delete(url[, config])
axios.put(url[, data[, config]])