正常情况下使用脚手架vue-cli创建的项目都集成了axios插件，无需安装，如果需要安装请使用npm install axios --save命令进行安装。
1、get请求
用于获取数据。
2、post请求
用于提交数据（新建）、包括表单提交及文件上传。
3、put请求
用于更新数据（修改），将所有数据都推送到后端。
4、patch请求
用于更新数据（修改），只将修改的数据推送到后端。
5、delete请求
用于删除数据。
首先导入axios，导入代码：
import axios from ‘axios‘
|
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> |
|
1
|
post方式请求，参数有两种形式： |
|
1
|
1、form-data表单提交（图片上传，文件上传） |
|
1
|
2、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> |
|
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> |
|
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> |
|
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> |
|
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）
原文：https://www.cnblogs.com/kwstu2018/p/14166822.html