<template>
<div>歌单详情</div>
</template>
<script>
import {useRoute} from 'vue-router';
import {onMounted,reactive} from 'vue';
import {getMusicItemList} from '@/request/api/item.js'
export default{
setup(){
const state = reactive({
playlist:{}
});
onMounted(async () => {
try {
let id = useRoute().query.id;
console.log(id);
let res = await getMusicItemList(id);
state.playlist = res.data.playList;
} catch (error) {
console.error('发生异常:', error);
}
});
return { state };
},
};
</script>
这是使用地方,接下来我将展示申请接口的地方
import service from "..";
//获取歌单详情页的数据
export function getMusicItemList(date){
return service({
method:"GET",
url:`/playlist/detail?id=${date}`,
timeout:3000
})
x详细的信息报错如下
AxiosError {message: 'timeout of 3000ms exceeded', name: 'AxiosError', code: 'ECONNABORTED', config: {…}, request: XMLHttpRequest, …}code: "ECONNABORTED"config: {transitional: {…}, adapter: Array(2), transformRequest: Array(1), transformResponse: Array(1), timeout: 3000, …}message: "timeout of 3000ms exceeded"name: "AxiosError"request: XMLHttpRequestonabort: ƒ handleAbort()onerror: ƒ handleError()onload: nullonloadend: ƒ onloadend()onloadstart: nullonprogress: nullonreadystatechange: nullontimeout: ƒ handleTimeout()readyState: 4response: ""responseText: ""responseType: ""responseURL: ""responseXML: nullstatus: 0statusText: ""timeout: 3000upload: XMLHttpRequestUpload {onloadstart: null, onprogress: null, onabort: null, onerror: null, onload: null, …}withCredentials: false[[Prototype]]: XMLHttpRequeststack: "AxiosError: timeout of 3000ms exceeded\n at XMLHttpRequest.handleTimeout (webpack-internal:///./node_modules/axios/lib/adapters/xhr.js:168:14)"[[Prototype]]: Errorconstructor: ƒ AxiosError(message, code, config, request, response)toJSON: ƒ toJSON()isAxiosError: true[[Prototype]]: Object
eval @ ItemMusic.vue:16
await in eval(异步)
eval @ runtime-core.esm-bundler.js:2675
callWithErrorHandling @ runtime-core.esm-bundler.js:158
callWithAsyncErrorHandling @ runtime-core.esm-bundler.js:166
hook.__weh.hook.__weh @ runtime-core.esm-bundler.js:2655
flushPostFlushCbs @ runtime-core.esm-bundler.js:325
flushJobs @ runtime-core.esm-bundler.js:363
Promise.then(异步)
queueFlush @ runtime-core.esm-bundler.js:270
queuePostFlushCb @ runtime-core.esm-bundler.js:290
queueEffectWithSuspense @ runtime-core.esm-bundler.js:1603
scheduler @ runtime-core.esm-bundler.js:1773
triggerEffect @ reactivity.esm-bundler.js:373
triggerEffects @ reactivity.esm-bundler.js:363
triggerRefValue @ reactivity.esm-bundler.js:974
eval @ reactivity.esm-bundler.js:1135
triggerEffect @ reactivity.esm-bundler.js:373
triggerEffects @ reactivity.esm-bundler.js:358
triggerRefValue @ reactivity.esm-bundler.js:974
eval @ reactivity.esm-bundler.js:1135
triggerEffect @ reactivity.esm-bundler.js:373
triggerEffects @ reactivity.esm-bundler.js:358
triggerRefValue @ reactivity.esm-bundler.js:974
set value @ reactivity.esm-bundler.js:1018
finalizeNavigation @ vue-router.mjs:3355
eval @ vue-router.mjs:3220
Promise.then(异步)
pushWithRedirect @ vue-router.mjs:3186
push @ vue-router.mjs:3112
install @ vue-router.mjs:3551
use @ runtime-core.esm-bundler.js:3752
eval @ main.js:12
./src/main.js @ app.js:19
__webpack_require__ @ app.js:516
(匿名) @ app.js:1697
__webpack_require__.O @ app.js:562
(匿名) @ app.js:1698
(匿名) @ app.js:1700
期望不报错能正常运行,已经检查了好几遍这个代码,修改了好几遍,一直是这个问题,也尝试过更改延长时间,但是即使变长也会报这个错误,但是自己的代码我实在不知道该如何修改了,可能是我这块还学的不够好