为方便起见,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 这些属性都不必在配置中指定。
get:获取数据
post:提交数据(表单提交+文件上传)
put:更新数据(所有数据推送到后端)
patch:更新数据(只将更改的数据推送到后端) delete:删除数据
首先安装并导入axios,导入代码:
npm i axios --save
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>
注意:方法1,传入参数的时候,需要 { } 然后在里面传入 params 这个参数,一定要是params。
params会出现在请求头中的querry string parameters中,并且会出现在浏览器的地址栏中,即会拼接到url中。
2. post请求
post方式请求,参数有两种形式:
- form-data表单提交(图片上传,文件上传)
- applicition/json
- 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>
- formData请求方式代码如下:
<script>
import axios from 'axios'
export default {
name: 'post请求',
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>
post的请求头中会有一个content-type,该字段有两个值,一个为form-data,一般用于表单提交(文件上传,图片上传等等);另一个是application/json即,传递的是json数据。
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>
因为axios的post和get带参数的请求方法是不大一样的。
get带参数请求的axios封装
//项目房间新增与编辑
import axios from '../axios';
//运输服务配置
let path = '/deliverAlteration';
//新增与编辑
export const save = (data) => {
let url = (data.id) ? `${path}/` : `${path}/`;
let method = (data.id) ? 'PUT' : 'POST';
return axios({
url,
method,
data
});
};
//分页查询表格数据 未发货
export const getPageList = (params) => {
return axios({
url: `${path}/page`,
params
});
};
// /deliverAlteration/getPlan 不分页
export const getAllList = (params) => {
return axios({
url: `${path}/getPlan`,
params
});
};
//打印 生产计划表格 html
export const getPrintHtml = (params) => {
return axios({
url: '/deliverAlteration/printAlterationDeliver',
params
});
};
//删除
export const deleteTableItem = (data) => {
return axios({
url: `/camera/${data.id}`,
method: 'DELETE',
})
};
// 导出 发货计划变更记录
export const exportSendPlanChange = (params) => {
return axios({
url: `/deliverAlteration/exportAlterationDeliver`,
params,
responseType:'blob'
});
};
引入方法
import {
getPageList,
} from "@/http/modules/sendPlanChange"