VUE3+JS请求

VUE3+JS请求

一、blob流传参

blob流常用来进行文件下载

下载方法

const download =()=>{
	const params={
		xxx
	}
	bizProjectApi.exportExcel(params).then((res)=>{
		const blob = new Blob([res.data], { type: 'application/octet-stream;charset=UTF-8' })
		const $link = document.createElement('a')
		$link.href = URL.createObjectURL(blob)
		$link.download = 'xxx.xlsx'
		$link.click()
		document.body.appendChild($link)
		document.body.removeChild($link) // 下载完成移除元素
		window.URL.revokeObjectURL($link.href) // 释放掉blob对象
	})
}

接口方法：

	exportExcel(data) {
		return request('路径', data, 'get', {
			responseType: 'blob' //类型为blob流文件
		})
	},

*注意：如果不加{ responseType: 'blob' //类型为blob流文件 }这句话，后端返回的流文件会在catch中返回，但是接口的请求方法不报错！

二、formdata传参

1. 仅传数据

	let formData = new FormData()
	formData.append('id','111')
	formData.append('reportType', 'aaa')
	bizProjectApi.editEecurityReporting(formData).then((res)=>{
		console.log(res)
	})

API接口：

	editEecurityReporting(data) {
		//系统自动选择合适的方法对数据进行处理
		return request('edit', data)
		//or
		//指定处理方法，但会在request的baseRequest方法中中操作，个人写的方法可能不太保险
		return request('edit', data, 'formdata')
	},

const request = (url, ...arg) => baseRequest(`/biz/project/${url}`, ...arg)

baseRequest方法：

export const baseRequest = (url, value = {}, method = 'post', options = {}) => {
	url = sysConfig.API_URL + url
	if (method === 'post') {
		return service.post(url, value, options)
	} else if (method === 'get') {
		return service.get(url, {
			params: value,
			...options
		})
	} else if (method === 'formdata') {
		return service({
			method: 'post',
			url,
			data: value,
			// 转换数据的方法
			transformRequest: [
				function (data) {
					let ret = ''
					for (const it in data) {
						ret += `${encodeURIComponent(it)}=${encodeURIComponent(data[it])}&`
					}
					ret = ret.substring(0, ret.length - 1)
					return ret
				}
			],
			// 设置请求头
			headers: {
				'Content-Type': 'multipart/form-data'
			}
		})
	}
}

2. 也常用来传送文件

	//文件上传时
	const beforeUpload = (file) => {
		fileList.value.push(file)
		console.log(fileList.value, 'fileList.value')
		let formData = new FormData()
		// formData.append('file', file)
		formData.append('fileName', file)
		console.log(formData.get('fileName'))
		// bizApplicationApi.appUpload(formData).then((res) => {
		// 	console.log(res, '文件上传')
		// 	filePath.value = res.addr
		// 	fileList.value = [file]
		// 	console.log(fileList.value)
		// })

		return false
	}

传参前常用的三种操作

	//1
	let formData = new FormData()
	formData.append('id',router.currentRoute.value.query.id)
	formData.append('reportType', radioValue.value)
	//2
	console.log(JSON.parse(JSON.stringify(params)), 'params')
	//3
	console.log(Object.assign(params), 'Object.assign(params)')