vuejs中如何使用axios调用后台接口
小白浏览：10252020-12-15 14:11:55本文累计收益：￥0元我也要赚钱
一、axios安装

正常情况下使用脚手架vue-cli创建的项目都集成了axios插件，无需安装，如果需要安装请使用npm install axios --save命令进行安装。

二、axios常见5种请求方法

1、get请求

用于获取数据。

2、post请求

用于提交数据（新建）、包括表单提交及文件上传。

3、put请求

用于更新数据（修改），将所有数据都推送到后端。

4、patch请求

用于更新数据（修改），只将修改的数据推送到后端。

5、delete请求

用于删除数据。

三、代码示例

首先导入axios，导入代码：

import axios from 'axios'

1、get方法
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<script>
    import axios from 'axios'
    export default {
        name: 'get请求'，
        components: {},
        created() {
            //写法一
            axios.get('接口地址', {
                params: {
                    id: 12,//请求参数
                },
            }).then(
                (res) => {
                    //执行成功后代码处理
                }
            )
            //写法二
            axios({
                method: 'get',//请求方法
                params: {
                    id: 12,//请求参数
                },
                url: '后台接口地址',
            }).then(res => {
                //执行成功后代码处理
            })
        }
    }
</script>
2、post请求
1
post方式请求，参数有两种形式：
1
1、form-data表单提交（图片上传，文件上传）
1
2、applicition/json
1）applicition/json请求方式代码如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<script>
    import axios from 'axios'
    export default {
        name: 'get请求'，
        components: {},
        created() {
            //写法一
            let data={
                id:12
            }
            axios.post('接口地址', data}).then(
                (res) => {
                    //执行成功后代码处理
                }
            )
            //写法二
            axios({
                method: 'post',//请求方法
                data: data,
                url: '后台接口地址',
            }).then(res => {
                //执行成功后代码处理
            })
        }
    }
</script>
2）formData请求方式代码如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<script>
    import axios from 'axios'
    export default {
        name: 'get请求'，
        components: {},
        created() {
            //写法一
            let data = {
                id:12
            }
            let formData = new formData()
            for(let key in data){
                fromData.append(key,data[key])
            }
            axios.post('接口地址', fromData}).then(
                (res) => {
                    //执行成功后代码处理
                }
            )
            //写法二
            axios({
                method: 'post',//请求方法
                data: fromData,
                url: '后台接口地址',
            }).then(res => {
                //执行成功后代码处理
            })
        }
    }
</script>
3、put请求

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<script>
    import axios from 'axios'
    export default {
        name: 'get请求'，
        components: {},
        created() {
            //写法一
            let data = {
                id:12
            }
            axios.put('接口地址', data}).then(
                (res) => {
                    //执行成功后代码处理
                }
            )
            //写法二
            axios({
                method: 'put',//请求方法
                data: data,
                url: '后台接口地址',
            }).then(res => {
                //执行成功后代码处理
            })
        }
    }
</script>
4、patch请求
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<script>
    import axios from 'axios'
    export default {
        name: 'get请求'，
        components: {},
        created() {
            //写法一
            let data = {
                id:12
            }
            axios.patch('接口地址', data}).then(
                (res) => {
                    //执行成功后代码处理
                }
            )
            //写法二
            axios({
                method: 'patch',//请求方法
                data: data,
                url: '后台接口地址',
            }).then(res => {
                //执行成功后代码处理
            })
        }
    }
</script>
5、delete请求
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<script>
    import axios from 'axios'
    export default {
        name: 'get请求'，
        components: {},
        created() {
            //写法一
            let data = {
                id:12
            }
            //url传递参数
            axios.delete('接口地址', {
                parmas:{
                    id:12
                }
            }).then(
                (res) => {
                    //执行成功后代码处理
                }
            )
            //post方式传递参数
            axios.delete('接口地址', {
                data:{
                    id:12
                }
            }).then(
                (res) => {
                    //执行成功后代码处理
                }
            )
            //写法二
            axios({
                method: 'patch',//请求方法
                parmas:{
                    id:12
                },
                url: '后台接口地址',
            }).then(res => {
                //执行成功后代码处理
            })
        }
    }
</script>

 

上一篇：axios入门（1）—— axios常用五种请求方法介绍（get、post、put、patch、delete）
下一篇：Vue 2.x + Element后台模板开发教程（四）后台首页模板设计之动态菜单
猜您可能还喜欢
评论列表
发表评论
小白
+ 关注
文章分类
文章归档
阅读排行