Axios 요청을 보내는 데 사용되는 유틸리티

API와 교차할 때, axiosis는 많은 사용자들이 데이터를 검색/발표하는 데 자주 사용하는 방법 중의 하나이다.본고에서, 나는 axios를 사용하여React에서 GET 요청을 처리하는 신속하고 편리한 방법을 공유할 것이다.유튜브 API의 경우 작성 방법입니다.검색어를 유튜브 API에 전송하고 검색어와 일치하는 처음 5개 동영상의 데이터를 가져옵니다.
먼저 유튜브 API 키를 가져옵니다.API 키를 가져오는 방법은 다음 절차를 따르십시오.
사용할 끝점은 다음과 같습니다.

axios를 설정합니다.만들다
API 키를 획득한 후에는 다음 명령을 실행하여 React 항목을 만들어야 합니다.create-react-app axios-create-example --typescript프로젝트가 준비되면 /src 폴더의 일부 파일을 삭제해서 프로젝트를 정리합니다.나는 보통 App.tsx, index.tsx, react-app-env.d.tsfiles만 남기고 모든 파일에서 삭제된 파일의 가져오기를 삭제한다.
다음 명령을 실행하여 axios를 설치합니다.npm install axios설치가 완료되면 /utils 폴더를 만들고 api.tsx 파일을 만듭니다.이 파일은 axios.create 논리로 저장됩니다.
첫 번째 작업은 api.tsx 파일에서 axios를 가져와서 실제적으로 사용할 수 있도록 하는 것입니다.import axios from ‘axios’이제 API 키를 저장하는 상수를 만듭니다.const API_KEY = ‘YOUR_API_KEY_FROM_YOUTUBE’API 키를 GitHub에 제출하려면 환경 변수로 설정해야 하며 익숙하지 않으면 확인this link해야 합니다.
그런 다음 유튜브 API에 액세스하는 데 필요한 URL과 매개변수를 포함하는 객체를 만들고 다음 구성 상수에 지정합니다.

// utils/api.tsx
const config = {
  baseURL: `https://www.googleapis.com/youtube/v3`,
  params: {
    part: 'snippet',
    maxResults: 5,
    key: API_KEY,
  },
}

베이스 URL은 엔드포인트 URL의 기본이며, params는 GET 메소드를 호출할 때 유튜브 API에 전달해야 하는 데이터 세트입니다."part"는 API 응답에 포함된 검색 자원 속성으로 이 예에서 "snippet"으로 설정합니다maxResults' 는 되돌려야 할 항목의 수입니다. 유튜브 API는 '키' 속성을 읽어서 이 API를 사용할 권리가 있음을 알 수 있습니다.
TypeScript 프로젝트로 이 프로젝트를 시작했기 때문에 이 설정 대상에 인터페이스를 추가합니다.그것은 다음과 같아야 한다.

// utils/api.tsx
interface Params {
  baseURL: string
  params: {
    part: string
    maxResults: number
    key: string | undefined
  }
}

다음 구성 상수에 추가합니다.

// utils/api.tsx
const config: Params = {
  //...
}

지금 네가 해야 할 일은 axios를 내보내는 것이다.config 객체를 매개변수로 생성하면 파일은 다음과 같습니다.

// utils/api.tsx
import axios from 'axios'

const API_KEY = `YOUR_API_KEY_FROM_YOUTUBE`

interface Params {
  baseURL: string
  params: {
    part: string
    maxResults: number
    key: string | undefined
  }
}

const config: Params = {
  baseURL: `https://www.googleapis.com/youtube/v3`,
  params: {
    part: 'snippet',
    maxResults: 5,
    key: API_KEY,
  },
}

export default axios.create(config)

axios.create 사용자 정의 설정을 사용하여 axios의 새로운 실례를 만들 수 있습니다. 이것은 GET, POST, DELETE, PUT 등 이 내보내기 함수를 호출해서 CRUD 작업을 수행할 수 있음을 의미합니다.

API 함수 사용
우리는 axios가 있다.앱에서 유튜브 동영상을 검색할 수 있는 설정을 만들 때가 됐다.App.tsx를 열고 새로 만든 axios create 함수를 가져옵니다.

// App.tsx
import React, { useCallback, useState } from 'react'
import api from './utils/api'

//…

응용 프로그램 구성 요소에서fetchVideosHandler를 만들어서 유튜브 동영상 데이터 목록을 얻을 것입니다.이것은 불필요한 데이터가 다시 가져오지 않도록 하기 위해 useCallback 갈고리를 사용하는 비동기 대기 함수입니다.fetchVideosHandler의 코드는 다음과 같습니다.

// App.tsx
const fetchVideosHandler = useCallback<(keyword: string) => Promise<void>>(
  async (keyword: string) => {
    try {
      // api call will be implemented here...      
    } catch (error) {
      console.log(error)
      throw new Error('Failed to fetch videos...')
    }
  },
  []
)

개별 파일에 생성한 API 함수를 사용하려면 다음과 같이 호출합니다.

const fetchVideosHandler = useCallback<(keyword: string) => Promise<void>>(
  async (keyword: string) => {
    try {
      const { data } = await api.get<VideoDataArray>('/search', {
        params: {
          q: keyword,
        },
      })
      console.log(data)
    } catch (error) {
      console.log(error)
      throw new Error('Failed to fetch videos...')
    }
  },
  []
)

여기에서 발생한 것은 api에서 가져온 utils/api.tsx 함수axios.create()를 내보내고 있는 것입니다. 이것은 axios 실례.get()를 만들 수 있도록 합니다. 이 예에서 전달/search 경로를 만들 수 있습니다.이것/search은 api.tsx에서 설정한baseURL과 결합하여 완전한 단점URL이 됩니다.키워드(검색어)가 포함된 객체params도 API로 전달되고 비디오 데이터가 반환됩니다.axios.create() 다양한 인스턴스를 생성할 수 있습니다.추가 정보here.
보시다시피 이 fetchVideosHandler 함수는 keyword 인자로 되어 있습니다.UI에 입력을 추가하고 다른 프로세서를 만들어 입력 값을 읽고 상태를 설정한 다음 다음과 같이 전달할 수 있습니다fetchVideosHandler.

// App.tsx inside App component
const [keyword, setKeyword] = useState('')

const inputChangeHandler = (event: React.ChangeEvent<HTMLInputElement>) => {
  setKeyword(event.target.value)
}

return (
  <div>
    <input
      type="text"
      placeholder="Search videos"
      onChange={inputChangeHandler}
    />
    <button
      onClick={() => fetchVideosHandler(keyword)}
    >
      Search
    </button>
  </div>
)

위의 코드는 입력에 입력한 내용을 선택하여 keyword 상태로 저장한 다음 검색 버튼을 클릭하면 트리거fetchVideosHandler 및 매개변수 값으로 사용할 키워드가 표시됩니다.

결론
axios를 사용하는 방법은 매우 많은데, 모든 사람은 자신의 방법으로 요청을 처리한다.이것은 내가 최근에 만난 빠른 방법이다. 나는 그것이 매우 유용하다고 생각한다.당신들 중 일부는 이것이 매우 도움이 된다고 생각하기를 바랍니다. 만약 당신이 방금 읽은 내용을 좋아한다면 공유해 주십시오.감사합니다!