Svelte 3 - 앱을 Rest API와 연결하는 방법 Axios

안녕하세요 여러분, Svelte 포스트 시리즈의 연속입니다. 오늘은 웹 애플리케이션을 백엔드 또는 Rest API와 연결하는 데 일반적으로 사용하는 한 가지 기술을 공유하고자 합니다.

Front End의 세계에서 시작하더라도 그의 장점과 프로젝트에 얼마나 쉽게 통합할 수 있는지에 대해 이야기하겠습니다.

타사 라이브러리 분리.

대부분의 경우 Rest API와 연결하기 위해 복잡한 구성을 처리하려면 타사 라이브러리 등을 구현해야 합니다.
이 경우 구현이 매우 쉽고 실용적이기 때문에 Axios를 사용합니다.

이 기술은 두 단계로 구성됩니다.

적절한 폴더 구조를 만들어 작업을 수행하고 구체적인 작업을 정의하는 책임을 분할합니다.

자신의 파일에 타사 라이브러리 구현이 있습니다.

우리가 볼 수 있는 장점 중 일부는 다음과 같습니다.

API 통신 방법을 찾는 쉬운 방법입니다.

HTTP 요청 라이브러리를 쉽게 변경할 수 있습니다.

Http 호출의 단일 지점입니다.

타사 라이브러리의 고급 구성입니다.

깨끗한 코드 유지.

코딩하자!!

1. 액시오스를 설치합니다.

Axios 작업을 시작하려면 프로젝트에서 npm 명령을 실행하는 라이브러리를 설치해야 합니다.

npm install axios

2. Axios 구현을 만듭니다.

라이브러리가 준비되면 services라는 폴더를 생성하여 모든 타사 라이브러리 구현을 Axios, signalR 클라이언트, 날짜 형식 라이브러리(순간) 등으로 추가해야 합니다.

이 폴더를 만든 이유는 라이브러리의 모든 추상화를 찾기 위함이며 라이브러리를 변경하려는 경우 전체 응용 프로그램을 수정하지 않고도 이러한 파일을 빠르게 수정할 수 있습니다.

자, 이제 Api.js라는 이름의 파일을 만들어 사용해야 하는 모든 HTTP 메서드를 추가합니다.
여기에 코드를 남길 것입니다. 매우 간단하고 자기 설명적이라고 생각합니다.

// Api.js
import axios from "axios";

// Create a instance of axios to use the same base url.
const axiosAPI = axios.create({
  baseURL : "https://pokeapi.co/api/v2/" // it's not recommended to have this info here.
});

// implement a method to execute all the request from here.
const apiRequest = (method, url, request) => {
    const headers = {
        authorization: ""
    };
    //using the axios instance to perform the request that received from each http method
    return axiosAPI({
        method,
        url,
        data: request,
        headers
      }).then(res => {
        return Promise.resolve(res.data);
      })
      .catch(err => {
        return Promise.reject(err);
      });
};

// function to execute the http get request
const get = (url, request) => apiRequest("get",url,request);

// function to execute the http delete request
const deleteRequest = (url, request) =>  apiRequest("delete", url, request);

// function to execute the http post request
const post = (url, request) => apiRequest("post", url, request);

// function to execute the http put request
const put = (url, request) => apiRequest("put", url, request);

// function to execute the http path request
const patch = (url, request) =>  apiRequest("patch", url, request);

// expose your method to other services or actions
const API ={
    get,
    delete: deleteRequest,
    post,
    put,
    patch
};
export default API;

이제 프로젝트의 모든 위치에서 HTTP 호출을 수행할 준비가 되었습니다. 🤗

3. API 서비스 사용.

이 단계는 선택 사항이지만 개인적으로 모든 API 호출을 api라는 폴더에 보관하고 각 API 리소스에 대한 파일을 만드는 것을 좋아합니다.
예를 들어 이 경우 사용할 리소스가 포켓몬이기 때문에 pokemon.js라는 파일을 생성하겠습니다.

이 파일에서는 내 Api.js 서비스를 사용하고 있으며 발생할 수 있는 Http 오류를 처리합니다.

// pokemon.js
// Implementations for all the calls for the pokemon endpoints.
import Api from "../services/Api";

// Method to get a list of all Pokemon
export const getPokemonList = async () => {
    try {
      const response = await Api.get("/pokemon?limit=500");
      return response.results;
    } catch (error) {
      console.error(error);
    }
};

// Get a pokemon details by name
export const getPokemonByName = async(name) => {
    try {
      const response = await Api.get(`/pokemon/${name}`);
      return response;
    } catch (error) {
      console.error(error);
    }
};

4. API 호출

데이터를 Svelte 페이지(구성 요소)로 가져오기 위해 메소드를 호출할 시간입니다.
이 페이지는 포켓몬 목록과 포켓몬, 이미지, 이름 및 유형에 대한 세부 정보가 있는 섹션으로 매우 간단합니다. API와 연결하는 기능에 집중하고 싶습니다.

<script>
  // PokeList.svelte
  const pageName="Poke-List";
  import { onMount } from 'svelte';
  import { getPokemonList, getPokemonByName } from "../api/pokemon"; // import our pokemon api calls

  let pokemonDetail = {};
  let pokemonList = [];

  // Get the data from the api, after the page is mounted.
  onMount(async () => {
    const res = await getPokemonList();
    pokemonList = res;
  });

  // method to handle the event to get the detail of the pokemon.
  const handleOnClick = event =>{
    const name = event.target.name;
    getPokemonByName(name).then(res => {
      pokemonDetail= {
        name,
        types: res.types,
        image: res.sprites.front_default
      };
    });
  };

  const getPokemonTypes = () => {
    return pokemonDetail.types.map(e => e.type.name).join(",");
  };
</script>

<style>
main {
        text-align: center;
        padding: 1em;
        max-width: 240px;
        margin: 0 auto;
    }

    h1 {
        color: #ff3e00;
        text-transform: uppercase;
        font-size: 4em;
        font-weight: 100;
    }

    @media (min-width: 640px) {
        main {
            max-width: none;
        }
    }
  .pokemonDetails{
    float: right;
    width: 500px;
     text-transform: capitalize;
  }
  .pokemonList{
    width: 300px;
    float: left;
    max-height: 400px;
    overflow-y: auto;
  }
  .pokemonList li{
    list-style: none;
    text-align: left;
    margin-bottom: 5px;
  }
  .pokemonList .pokeName{
    text-transform: capitalize;
    font-size: 18px;
    font-weight: 700;
  }
  button {
    background: none!important;
    border: none;
    padding: 0!important;
    color: #069;
    text-decoration: underline;
    cursor: pointer;
  }
</style>

<main>
    <h1> {pageName}!</h1>
    <p>Welcome to my <b>{pageName}</b></p>
      <ul  class="pokemonList">
        {#each pokemonList as pokemon}
            <li>
              <label class="pokeName">
                {pokemon.name}
              </label>
              <button 
                type="button" 
                name={pokemon.name}
                on:click={handleOnClick}>See Details</button>
            </li>
        {/each}
      </ul>
      <div class="pokemonDetails">
        <h3>Pokemon Detail</h3>
        {#if pokemonDetail.image}
         <img 
              class="pokeimage"
              src={pokemonDetail.image}
              alt="pokeimage"/>
          <label><b>{pokemonDetail.name ? pokemonDetail.name : ""}</b></label>
          <label><b>Types: </b>{pokemonDetail.types ? getPokemonTypes() : ""}</label>
        {/if}
      </div>
</main>

마무리

보시다시피 Axios를 사용하여 Rest API와 매우 빠르고 쉽게 연결할 수 있으며 깨끗한 코드도 있습니다.

이전 코드 구현을 적용한 후, 내 코드를 보는 방법입니다.
참고: 추가한 새 파일과 폴더는 노란색입니다.


PokeList가 실행되는 모습은 다음과 같습니다.



이 구현이 도움이 되었기를 바랍니다. 질문이나 제안 사항이 있으면 댓글 섹션에 남겨주세요. 제가 읽어드리겠습니다. 😉

Svelte에 익숙하지 않다면 첫 번째 Svelte 프로젝트를 만들고 페이지 라우팅을 구현하는 방법을 설명하는 다른 게시물을 확인하는 것이 좋습니다.