http请求响应状态为canceled问题

背景：vue3结合axios , 某个接口请求总是会出现canceled状态，如下图：

分析一下，可能是超时时间设置的问题，原始超时时间显示设置的是3s, 而这个接口响应时间大概有5～10s，

 axios.create({
      headers: { 'Content-Type': 'application/json;charset=UTF-8' },
      withCredentials: true,
      timeout: 30000,
    })

可以把超时时间设置的大一点，或者接口做成异步的，都可以解决该问题