网路请求的快速模板
<script>
import { getRoadInfo } from "@/api/UrbanIntegration/basicDataManage"
export default {
methods:{
async _getRoadInfo() {
// 请求数据
const { code, data, message } = await getRoadInfo();
console.log(data);
// 更新表格数据
this.tableData = data.list;
}
},
created(){
// 请求道路信息
this._getRoadInfo()
}
}
</script>
导入excel的模板
api的文件
由于有file文件 要改修改请求头
// api/xx.js
/**
* xxx 导入excel
* @param {} data
*/
export function xxxxx(data) {
return request({
url: 'parking-no/import-device',
method: 'post',
headers: {
'Content-Type': 'multipart/form-data'
},
data
})
}
发起请求的写法
async _parkingSpotImportExcel(formData) {
// 过滤掉formData不用请求的属性
const { parkingNo, ...obj } = formData;
// 将文件对象 也添加到请求的对象中
const reqObj = { ...obj, file: this.exportFileData };
const reqFormData = new FormData(); // 表单提交对象
// 因为有文件对象 所以就要将文件添加到formData中才能进行提交
// 遍历请求对象 将每一项都添加到formData中
Object.keys(reqObj).forEach(key => reqFormData.append(key, reqObj[key]));
console.log(reqFormData);
// 发动导入excel的请求
await parkingSpotImportExcel(reqFormData);
}
导出excel的模板
api的文件
请求的url必须是完整的
因为响应的是流数据 所以我们要指定返回的响应类型
// api/xx.js
import { exportExcel } from '@/utils/'
/**
* xxxx 导出excel
* @param {} data
// */
export function xxxxx(data, fileName) {
exportExcel({
url: '/i-api/v1/parking-no/export-excel',
method: 'post',
data,
responseType: 'blob'
}, fileName)
}
发起请求的写法
async _getParkingSpotListExcel() {
//导出 执行函数
await parkingSpotExportExcel(
// 请求参数
{
...this.selectArea,
keyword: this.listQuery.keyword,
ids: this.selectIds
},
// 文件名
'停车泊位列表'
);
},