axios延迟报错AxiosErrortimeout of 3000ms exceeded

Question

<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

期望不报错能正常运行，已经检查了好几遍这个代码，修改了好几遍，一直是这个问题，也尝试过更改延长时间，但是即使变长也会报这个错误，但是自己的代码我实在不知道该如何修改了，可能是我这块还学的不够好

Answer 1