Cộng đồng Hỏi & Đáp của Inflearn

câu hỏi đã được viết

Vue3 Perfect Master: Từ cơ bản đến thực hành - "Phiên bản thực hành"

Module axios & Cài đặt biến môi trường Vite (env)

axios timeout

Viết

·

288

0

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;
}

vue.js

Câu trả lời 3

1

Người đặt câu hỏi

안녕하세요.

api 서버를 꺼버리고 테스트 했을때도

timeout 시간동안 계속 시도하는걸로 이해했는데

그게 아니었네요.

api 서버에서 의도적으로 11초의 delay를 주니

정상적인 timeout error가 발생한것을 확인했습니다.

빠르고 정확한 답변에 감사드립니다.

0

Người đặt câu hỏi

안녕하세요.

console로 찍어보니 아래와 같습니다.

AxiosError {message: 'Network Error', name: 'AxiosError', code: 'ERR_NETWORK', config: {…}, request: XMLHttpRequest, …}
1. code: "ERR_NETWORK"
2. config:
  1. adapter: (3) ['xhr', 'http', 'fetch']
  2. allowAbsoluteUrls: true
  3. baseURL: "http://localhost:58824/api/post"
  4. data: undefined
  5. env: {FormData: ƒ, Blob: ƒ}
  6. headers: AxiosHeaders {Accept: 'application/json, text/plain, /', Content-Type: undefined, X-Custom-Header: 'foobar'}
  7. maxBodyLength: -1
  8. maxContentLength: -1
  9. method: "get"
  10. timeout: 10000
  11. transformRequest: [ƒ]
  12. transformResponse: [ƒ]
  13. transitional: {silentJSONParsing: true, forcedJSONParsing: true, clarifyTimeoutError: false}
  14. url: "?group=1&page=1"
  15. validateStatus: ƒ validateStatus(status)
  16. xsrfCookieName: "XSRF-TOKEN"
  17. xsrfHeaderName: "X-XSRF-TOKEN"
  18. [[Prototype]]: Object
3. message: "Network Error"
4. name: "AxiosError"
5. request: XMLHttpRequest {onreadystatechange: null, readyState: 4, timeout: 10000, withCredentials: false, upload: XMLHttpRequestUpload, …}
6. 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)"
7. [[Prototype]]: Error

Người chia sẻ kiến thức

axios timeout 에러가 아닌것으로 보입니다.

axios timeout 에러는 HTTP 요청이 설정된 시간 내에 완료되지 않았을 때 발생하는 에러입니다. 이러한 에러는 일반적으로

에러 코드: 보통 ECONNABORTED가 표시됩니다 (앞서 본 ERR_NETWORK와 다름)
메시지: "timeout of X ms exceeded" 같은 메시지가 포함됩니다
설정된 timeout 값(밀리초 단위)보다 요청 처리 시간이 길어질 때 발생합니다

아래 내용을 확인해보세요

프론트엔드는 3000번 포트에서 실행 중이고, 백엔드는 58824번 포트에서 실행 중인 것으로 보입니다.

백엔드 서버(58824 포트)가 실행 중인지 확인하세요
서버의 API 엔드포인트가 정확한지 확인하세요
API 요청 경로가 올바른지 확인하세요
개발자 도구의 네트워크 탭에서 해당 요청의 상세 정보를 확인해보세요

0

Người chia sẻ kiến thức

어떤 응답(에러 메시지)이 왔는지 확인할 수 있을까요~?

câu hỏi đã được viết

Đặt câu hỏi