fix: fetch demo error

This commit is contained in:
chansee97 2024-04-02 11:22:10 +08:00
parent 98ed84b2b3
commit 609a26b847
3 changed files with 36 additions and 21 deletions

View File

@ -37,10 +37,14 @@ export function withoutToken() {
export function dictData() { export function dictData() {
return request.Get('/getDictData', { return request.Get('/getDictData', {
transformData(rawData, _headers) { transformData(rawData, _headers) {
const { data } = rawData as any const response = rawData as any
return { return {
gender: data.gender === 0 ? '男' : '女', ...response,
status: `状态是${data.status}`, data: {
...response.data,
gender: response.data.gender === 0 ? '男' : '女',
status: `状态是${response.data.status}`,
},
} }
}, },
}) })
@ -57,10 +61,15 @@ export function getBlob(url: string) {
/* 带进度的下载文件 */ /* 带进度的下载文件 */
export function downloadFile(url: string) { export function downloadFile(url: string) {
return blankInstance.Get(url, { const methodInstance = blankInstance.Get<Blob>(url, {
// 开启下载进度 // 开启下载进度
enableDownload: true, enableDownload: true,
}) })
methodInstance.meta = {
// 标识为bolb数据
isBlob: true,
}
return methodInstance
} }
/* 测试状态码500失败 */ /* 测试状态码500失败 */
export function FailedRequest() { export function FailedRequest() {

View File

@ -135,7 +135,6 @@ export const useRouteStore = defineStore('route-store', {
}) })
resultRouter = arrayToTree(resultRouter) as AppRoute.Route[] resultRouter = arrayToTree(resultRouter) as AppRoute.Route[]
console.warn('🚀 ~ createRoutes ~ resultRouter:', resultRouter)
this.setRedirect(resultRouter) this.setRedirect(resultRouter)
const appRootRoute: RouteRecordRaw = { const appRootRoute: RouteRecordRaw = {
path: '/appRoot', path: '/appRoot',

View File

@ -112,24 +112,16 @@ function getDictData() {
msg.value = res msg.value = res
}) })
} }
const filePath = ref('https://images.unsplash.com/photo-1663529628961-80aa6ebcd157?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=764&q=80')
// //
const imagePath = ref('https://images.unsplash.com/photo-1663529628961-80aa6ebcd157?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=764&q=80')
function getBlobFile() { function getBlobFile() {
getBlob(imagePath.value).then((res) => { getBlob(filePath.value).then((res) => {
msg.value = 'this is blob!' downloadLink(res, 'BlobOk')
const link = URL.createObjectURL(res)
const eleLink = document.createElement('a')
eleLink.download = 'okk'
eleLink.style.display = 'none'
eleLink.href = link
document.body.appendChild(eleLink)
eleLink.click()
document.body.removeChild(eleLink)
}) })
} }
// //
const downloadPath = ref('https://suqiqi.oss-cn-beijing.aliyuncs.com/test/video/1.mp4') const { downloading, abort: abortDownloadFile, send: sendDownloadFile } = useRequest(downloadFile(filePath.value), {
const { downloading, abort: abortDownloadFile, send: sendDownloadFile } = useRequest(downloadFile(downloadPath.value), {
// immediatefalse // immediatefalse
immediate: false, immediate: false,
}) })
@ -138,6 +130,21 @@ const downloadProcess = computed(() => {
return 0 return 0
return Math.floor(downloading.value.loaded / downloading.value.total * 100) return Math.floor(downloading.value.loaded / downloading.value.total * 100)
}) })
async function handleDownloadFile() {
const res = await sendDownloadFile()
downloadLink(res, 'fileOk')
}
function downloadLink(data: Blob, name: string) {
const link = URL.createObjectURL(data)
const eleLink = document.createElement('a')
eleLink.download = name
eleLink.style.display = 'none'
eleLink.href = link
document.body.appendChild(eleLink)
eleLink.click()
document.body.removeChild(eleLink)
}
</script> </script>
<template> <template>
@ -194,12 +201,12 @@ const downloadProcess = computed(() => {
</n-descriptions-item> </n-descriptions-item>
<n-descriptions-item label="带进度的下载文件" :span="3"> <n-descriptions-item label="带进度的下载文件" :span="3">
<n-space vertical> <n-space vertical>
<n-input v-model:value="downloadPath" /> <n-input v-model:value="filePath" />
<div>文件大小{{ downloading.total }}B</div> <div>文件大小{{ downloading.total }}B</div>
<div>已下载{{ downloading.loaded }}B</div> <div>已下载{{ downloading.loaded }}B</div>
<n-progress type="line" indicator-placement="inside" :percentage="downloadProcess" /> <n-progress type="line" indicator-placement="inside" :percentage="downloadProcess" />
<n-space> <n-space>
<n-button strong secondary @click="sendDownloadFile"> <n-button strong secondary @click="handleDownloadFile">
开始下载 开始下载
</n-button> </n-button>
<n-button strong secondary type="warning" @click="abortDownloadFile"> <n-button strong secondary type="warning" @click="abortDownloadFile">