Svelte 3 -どのように残りのAPI axiosを使用してアプリケーションを接続する


こんにちは皆さん、Svelte Postシリーズと連続して、今日、私は通常私のウェブアプリケーションを私のバックエンドまたは残りAPIに接続するために使う1つのテクニックを共有したいです.
私は彼の利点について話します、そして、あなたがフロントエンドの世界で始まっているとしても、あなたのプロジェクトとどのように簡単に統合することができますか.

サードパーティライブラリのデカップリング


ほとんどの場合、残りのAPIと接続するには、複雑な構成を処理する場合は、サードパーティライブラリを実装する必要があります.
この場合、私たちはaxiosを使います.なぜなら、それは非常に簡単で実用的であるからです.
この手法は2段階である.
  • アクションを実行し、具体的なアクションを定義する責任を分割するために良いフォルダー構造を作成します.
  • は自分のファイルでサードパーティライブラリの実装を持っている.
  • 我々が見る利点のいくつかは以下の通りです.
  • API通信方法を見つける簡単な方法.
  • HTTPリクエストライブラリを簡単に変更できます.
  • HTTPコールのシングルポイント.
  • サードパーティライブラリの高度な構成.
  • クリーンコードを保持.
  • コードしましょう!


    1 . axiosをインストールします。


    Axiosで作業を開始するには、プロジェクトにnpmコマンドを実行するライブラリをインストールする必要があります.
    npm install axios
    

    2 . Axiosの実装を作成します。


    私たちのライブラリが用意されている1つ、我々はすべてのサードパーティライブラリの実装をaxios、signalrクライアント、日付形式ライブラリ(モーメント)などを追加するためにservicesと呼ばれるフォルダを作成する必要があります.
    このフォルダの理由は、ライブラリのすべての抽象化を見つけることです.ライブラリを変更したい場合は、アプリケーション全体を変更せずに、これらのファイルをすばやく変更することができます.
    さて、今では私たちが使用するすべてのHTTPメソッドを追加するために、Api.jsの名前のファイルを作成します.
    私はここでコードを残します、私はそれが非常に単純で、自己記述されると思います.
    // 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呼び出しをする準備ができています.🤗

    APIサービスの使用。


    このステップはオプションですが、個人的にはAPIと呼ばれるフォルダにAPIを呼び出し、API APIごとにファイルを作成します.
    たとえば、この場合、私はpokemonというファイルを作成します.私が使用するリソースはポケモンです.
    このファイルでは、私はApi.jsサービスを使用しています.
    // 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);
        }
    };
    

    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>
    

    ラッピング


    ご覧のように、それは非常に迅速かつ簡単にAPIを使用してAPIを接続すると、クリーンなコードを持って接続するのも簡単です.
    以前のコード実装を適用した後、私のコードを見る方法です.
    注:私たちが追加した新しいファイルとフォルダは黄色です.

    そして、我々のポケニストが走る方法は、ここにあります.

    私は、この実装があなたに役立つことを望みます.あなたが質問または提案があるならば、私はあなたを読んでいるコメント部に残します.😉
    あなたが最初のSvelteプロジェクトを作成して、ページルーティングを実行する方法を説明する私の他のポストをチェックするSvelte I High推薦に精通していないならば、待ってください.