axios入门——常用五种请求方法介绍(get、post、put、patch、delete)
写在前面axios中文说明为方便起见,axios为所有支持的请求方法提供了别名params 是将与请求一起发送的 URL 参数,对应后台中的querydata 是作为请求主体被发送的数据,对应后台中的bodyaxios.request(config)axios.get(url[, config])// 只支持 params 传参axios.delete(url[, config])// 只支持 p
文章共2,833字 · 阅读需要大约10分钟
一键AI生成摘要,助你高效阅读
问答
·
写在前面
为方便起见,axios
为所有支持的请求方法提供了别名
params
是将与请求一起发送的 URL 参数,对应后台中的query
data
是作为请求主体被发送的数据,对应后台中的body
axios.request(config)
axios.get(url[, config]) // 只支持 params 传参
axios.delete(url[, config]) // 只支持 params传参
axios.head(url[, config]) // 只支持 params传参
axios.post(url[, data[, config]]) // 同时支持 data 和 params
axios.put(url[, data[, config]]) // 同时支持 data 和 params
axios.patch(url[, data[, config]]) // 同时支持 data 和 params
注意
在使用别名方法时, url、method、data 这些属性都不必在配置中指定。
一、axios安装
正常情况下使用脚手架vue-cli创建的项目都集成了axios插件,无需安装,如果需要安装请使用npm install axios --save
命令进行安装
二、axios常见5种请求方法
- get请求
用于获取数据。
- post请求
用于提交数据(新建)、包括表单提交及文件上传。
- put请求
用于更新数据(修改),将所有数据都推送到后端。
- patch请求
用于更新数据(修改),只将修改的数据推送到后端。
- 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方式请求,参数有两种形式:
- form-data表单提交(图片上传,文件上传)
- 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>
put和patch的区别 https://blog.csdn.net/lhjuejiang/article/details/82112998
更多推荐
已为社区贡献1条内容
所有评论(0)