axios请求状态管理 axios请求的五个步骤

一、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方法

<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请求

post方式请求，参数有两种形式：

1、form-data表单提交（图片上传，文件上传）

2、applicition/json

1）applicition/json请求方式代码如下：

<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请求方式代码如下：

<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请求

<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请求

<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请求

<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>