公用模板-优快云博客

这篇博客介绍了前端开发中关于网络请求和Excel文件操作的模板。包括使用axios进行异步GET请求获取道路信息，并更新表格数据；导入Excel时设置'Content-Type'为'multipart/form-data'，通过FormData处理文件上传；以及导出Excel时设置'responseType'为'blob'，确保能正确处理流数据。示例涵盖了请求头修改、表单数据处理和完整请求流程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

网路请求的快速模板

<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
    },
    // 文件名
    '停车泊位列表'
  );
},