JavaScript의 Axios용 치트 시트

원래 게시일realpythonproject.com

에 나와 연결

꽤 많은 사람들my previous article이 도움이 되었기 때문에 axios에 대한 비슷한 치트시트를 만들기로 결정했습니다.

Axios는 요청을 만들고 API를 사용하는 데 사용됩니다.

저는 NodeJS 환경에서 일할 것입니다.

Axios 설치

npm install axios

Axios 가져오기

const axios = require('axios')

get 요청하기

약속 있음(async/await 없음)

const axios = require("axios");
const url = "https://jsonplaceholder.typicode.com/todos/1";

axios.get(url)
  .then((response) => response)
  .then((responseObject) => console.log(responseObject.data))
  .catch((err) => console.log(err));

비동기/대기

내부적으로 우리는 여전히 약속을 사용하고 있습니다. Async/await는 코드를 훨씬 더 깔끔하게 보이게 합니다.

const axios = require("axios");

const getData = async (url) => {
  const res = await axios.get(url);
  const json = await res.data;
  console.log(json);
};

const url = "https://jsonplaceholder.typicode.com/todos/1";
getData(url);

동시에 여러 요청하기

const axios = require("axios");

const getData = async (url, id) => {
  console.log("Making request to id ", id);
  const res = await axios.get(url + id);
  const json = await res.data;
  console.log(json);
  return json;
};

const url = "https://jsonplaceholder.typicode.com/posts/";
const ids = [1, 2, 3, 4, 5, 6, 7];
axios
  .all(ids.map((id) => getData(url, id)))
  .then(
    (res) => console.log(res) // Array of all the json data
    //[ {userId:1} , {userId:2} , {userId:3}...........]
  )
  .catch((err) => console.log(err));

매개변수 전달

URL에 추가

const getData = async (url) => {
  const res = await axios.get(url);
  const json = await res.data;
  console.log(json);
};
const url = "https://jsonplaceholder.typicode.com/posts?userId=1";
getData(url);

params 객체 생성

const getData = async (url,params) => {
  const res = await axios.get(url,{
    params: params
  });
  const json = await res.data;
  console.log(json);
};
const url = "https://jsonplaceholder.typicode.com/posts";
const params  = {
  userId: 1
}
getData(url,params);

헤더 객체 전달

이는 사용 중인 API에 인증이 필요한 경우에 유용합니다. 우리는 Cats as a Service API

.env 파일에 저장된 env 변수 로드

npm을 사용하여 'dotenv'를 설치해야 합니다.

npm install dotenv

아래 코드 스니펫은 환경 변수를 읽습니다.

require("dotenv").config();
const CAT_API_KEY = process.env.API_KEY;

API에 요청을 해보자

const getData = async (url,headers) => {
  const res = await axios.get(url,{
      headers: headers
  });
  const json = await res.data;
  console.log(json);
};
const url =
  "https://api.thecatapi.com/v1/breeds";
const headers = {
    "x-api-key": CAT_API_KEY,
  };
getData(url,headers);

요청을 할 때 단순히 객체를 만들고 그 안에 헤더 객체를 저장합니다.

오류 처리

Cat의 API에 요청하지만 존재하지 않는 엔드포인트에 요청을 해보자.

then..catch 처리

axios
  .get(url, {
    headers: headers,
  })
  .then((res) => res)
  .then((responseObject) => console.log(responseObject.data))
  .catch((err) => console.log(err));

async/await 및 try...catch 처리

const getData = async (url, headers) => {
  try {
    const res = await axios.get(url, {
      headers: headers,
    });
  } catch (err) {
    console.log(err);
  }
};

게시물 요청하기

const postData = async (url, data) => {
  const res = await axios.post(url, {
    ...data,
  });
  const json = await res.data;
  console.log(json);
};

const url = "https://jsonplaceholder.typicode.com/posts";
const data = {
  title: "test Data",
  body: "this is a test post request",
  userId: 120,
};

postData(url, data);

응답 개체

const getData = async (url) => {
  const res = await axios.get(url);
  const json = await res.data
  console.log(json); // The JSON data
  console.log(res.status) // 200
  console.log(res.statusText) // OK
  /**
   * The below provide more info about your request
   * such as url, request type, redirects, protocols etc
   */
  console.log(res.headers)
  console.log(res.config) 
  console.log(res.request) 
};