응답, 응답 요청

by

쿼리에 응답

Ajax 요청을 할 때 여러 기능이 필요한 경우가 있습니다.

  • 몇 초마다 데이터를 자동으로 다시 가져오는 방법은 무엇입니까?
  • 요청이 실패하면 몇 초 동안 다시 시도하시겠습니까?
  • 다음 페이지를 어떻게 미리 로드합니까?
  • ajax 성공/실패에 대해 다른 html 파일을 표시하는 방법은 무엇입니까?

직접 개발할 수도 있지만 React-Query 라이브러리를 설치하여 사용할 수 있습니다.

React-Query는 프런트엔드에서 서버 상태(DB 데이터)를 실시간으로 동기화하는 데 도움이 되기 때문에

'추천 관련글,

다음과 같이 실시간 데이터를 표시해야 하는 웹 사이트에 유용합니다. 나. SNS 및 코인거래소, 단

몇 초마다 지속적으로 ajax 요청을 보내고 가져오기 때문에 비효율적일 수 있습니다.

따라서 React-Query는 Ajax 관련 기능 개발을 용이하게 할 수 있다는 점에서 의미가 있습니다.

React Query 설치 및 설정

터미널을 열다

npm install @tanstack/react-query

입력하여 설치

//index.js

import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
const queryClient = new QueryClient()

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <QueryClientProvider client={queryClient}>
    <Provider store={store}>
      <BrowserRouter>
        <App />
      </BrowserRouter>
    </Provider>
  </QueryClientProvider>
);
  1. 상단에 QueryClient, QueryClientProvider 가져오기
  2. const queryClient = 새 쿼리 클라이언트()
  3. QueryClientProvider에서 래핑한 후 client={queryClient}

응답 쿼리가 포함된 Ajax 요청

function App(){
  let result = useQuery(('작명'), ()=>
    axios.get('자신이 얻기 원하는 데이터링크')
    .then((a)=>{ return a.data })
  )
}
  1. 상단에 useQuery 가져오기
  2. 아약스 요청 useQuery()로 감싸세요.

4가지 유용한 기능

1. Ajax 요청 시 성공/실패/로딩 상태를 쉽게 확인할 수 있습니다.

function App(){
  let result = useQuery(('작명'), ()=>
    axios.get('자신이 얻기 원하는 데이터링크')
    .then((a)=>{ return a.data })
  )

  return (
    <div>
      { result.isLoading && '로딩중' }
      { result.error && '에러남' }
      { result.data && result.data.name }
    </div>
  )
}

현재 Ajax 상태는 결과라는 변수에 자동으로 저장됩니다.

  • Ajax 요청이 로드되면 result.isLoading이 true가 됩니다.
  • Ajax 요청이 실패하면 result.error는 true입니다.
  • Ajax 요청이 성공하면 데이터가 result.data에 저장됩니다.

그래서 개발할 때 상태를 만들어야 하는데 그럴 때는 x에서 따로 만들어야 한다.

2. Re-Ajax 요청

페이지에 머문 후 일정 시간이 경과했거나 다른 창으로 이동했다가 이 페이지로 돌아오면

메인 페이지로 돌아가면 ajax 요청이 자동으로 다시 이루어집니다.

재요청 비활성화 방법, 재요청 간격 조정 방법

let result = useQuery(
("작명"),
() =>
  axios.get('자신이 얻기 원하는 데이터링크').then((a) => {
    console.log("요청됨");
    return a.data;
  }),
{ staleTime: 2000 }
);

staleTime으로 재정렬 간격을 조정할 수 있습니다.

3. 실패하면 다시 시도하십시오.

일시적인 인터넷 중단 또는 서버 충돌로 인해 Ajax 요청이 실패하는 경우

여러 번 반복

4. Ajax에서 가져온 결과는 상태에서 공유할 필요가 없습니다.

props를 보내지 않고 동일한 ajax 요청 코드를 작성하여 요청을 하면

React-Query는 2개의 ajax 요청이 있는 경우 1을 던집니다.

동일한 Ajax 요청이 이미 캐싱 기능을 사용하여 생성된 경우 먼저 가져와서 사용합니다.