axios timeout
324
작성한 질문수 3
axios를 create할때 timeout값을
1초(1000)에서 10초(10000)로
변경했습니다.
api 서버를 종료하고 테스트 해보니
10초가 안먹는거 같네요.
다른 값으로 입력해도 거의 항상 2초만에
network error가 뜹니다.
왜 그런걸까요?
import axios from 'axios';
function create(baseURL) {
const instance = axios.create({
baseURL,
timeout: 10000,
headers: { 'X-Custom-Header': 'foobar' },
});
return instance;
}답변 3
1
안녕하세요.
api 서버를 꺼버리고 테스트 했을때도
timeout 시간동안 계속 시도하는걸로 이해했는데
그게 아니었네요.
api 서버에서 의도적으로 11초의 delay를 주니
정상적인 timeout error가 발생한것을 확인했습니다.
빠르고 정확한 답변에 감사드립니다.
0
안녕하세요.
console로 찍어보니 아래와 같습니다.
AxiosError {message: 'Network Error', name: 'AxiosError', code: 'ERR_NETWORK', config: {…}, request: XMLHttpRequest, …}
code: "ERR_NETWORK"
config:
adapter: (3) ['xhr', 'http', 'fetch']
allowAbsoluteUrls: true
baseURL: "http://localhost:58824/api/post"
data: undefined
env: {FormData: ƒ, Blob: ƒ}
headers: AxiosHeaders {Accept: 'application/json, text/plain, /', Content-Type: undefined, X-Custom-Header: 'foobar'}
maxBodyLength: -1
maxContentLength: -1
method: "get"
timeout: 10000
transformRequest: [ƒ]
transformResponse: [ƒ]
transitional: {silentJSONParsing: true, forcedJSONParsing: true, clarifyTimeoutError: false}
url: "?group=1&page=1"
validateStatus: ƒ validateStatus(status)
xsrfCookieName: "XSRF-TOKEN"
xsrfHeaderName: "X-XSRF-TOKEN"
[[Prototype]]: Object
message: "Network Error"
name: "AxiosError"
request: XMLHttpRequest {onreadystatechange: null, readyState: 4, timeout: 10000, withCredentials: false, upload: XMLHttpRequestUpload, …}
stack: "AxiosError: Network Error\n at XMLHttpRequest.handleError (http://localhost:3000/node_modules/.vite/deps/axios.js?v=597761da:1542:14)\n at Axios.request (http://localhost:3000/node_modules/.vite/deps/axios.js?v=597761da:2062:41)\n at async fetchPosts (http://localhost:3000/src/components/PostListComponent.vue?t=1745193941392:39:22)"
[[Prototype]]: Error
0
axios timeout 에러가 아닌것으로 보입니다.
axios timeout 에러는 HTTP 요청이 설정된 시간 내에 완료되지 않았을 때 발생하는 에러입니다. 이러한 에러는 일반적으로
에러 코드: 보통
ECONNABORTED가 표시됩니다 (앞서 본ERR_NETWORK와 다름)메시지: "timeout of X ms exceeded" 같은 메시지가 포함됩니다
설정된 timeout 값(밀리초 단위)보다 요청 처리 시간이 길어질 때 발생합니다
아래 내용을 확인해보세요
프론트엔드는 3000번 포트에서 실행 중이고, 백엔드는 58824번 포트에서 실행 중인 것으로 보입니다.
백엔드 서버(58824 포트)가 실행 중인지 확인하세요
서버의 API 엔드포인트가 정확한지 확인하세요
API 요청 경로가 올바른지 확인하세요
개발자 도구의 네트워크 탭에서 해당 요청의 상세 정보를 확인해보세요
질문드립니다.
0
29
0
unplugin-vue-components 질문드립니다.
0
32
2
강의듣다가 헷갈려서 질문드립니다.
0
28
1
와 짐코딩님 강의 들으면서 느끼는게 많네요.
0
27
1
질문드립니다.
0
28
2
라우터 인스톨 후 실행안됨
1
47
2
코드 자동 포매팅 질문
0
67
2
필터 watchEffect 질문입니다.
0
50
1
json-server 오류가 다른게 뜨네요
0
111
1
미리보기가 안됩니당...
0
68
2
unplugin-vue-components
0
79
2
TypeError 질문
0
49
1
v-model="show" :show="show" 같이 사용?
1
53
1
hash 모드 배포의 필요성?
0
59
2
.eslintrc.cjs 가 없습니다
0
95
2
title,content값이 비어서 저장되는데 제가 혹시 어떤 부분을 잘못 작성했는지 ㅜㅜ 알고싶습니다.
0
97
3
_title_like: "", 문의드려요 해당 값을 설정하면 list가 아에 안나옵니다.
0
63
1
@click.prevent="params._page = pageNum"> 에 .value를 안쓰는 이유가 궁금합니다.
0
69
2
중첩된 컴포넌트 문제
0
74
2
교안에 있는 부분이 아닌가요?
0
109
2
useAxios Proxy(Object) RefImpl
0
113
1
강의와 상관은 없지만, 궁금한 점이 있어 질문드립니다.
0
121
2
컴포넌트 분리 부분에서 오류가 나요ㅠㅠ
0
167
2
This dependency was not found:
0
140
2