Affect Wait構文を使用してフェッチとAxiosを使用してAPIを使用する方法

インターネットの良い一日の素敵な友人は、おそらくTwitterの前に、おそらく開発者のスラック/不条理チャンネルや誰かがどこかに言及聞いた上で用語APIに遭遇している.この記事では、APIをどのようにreactjsで消費するかを説明します.

何がAPIですか？

アプリケーション、P -プログラミング、I -インターフェイス
Wikipediaからの定義は、「アプリケーションプログラミングインターフェース(API)はコンピュータの間で、または、コンピュータ・プログラムの間の接続です.」
本質的に、APIはクライアント(フロントエンド)からサーバー(バックエンド)へデータを送受信する方法です

事前の要件

この記事でさらに進む前に、私はあなたが反応の反応の前の知識を持って、反応フックと機能的な構成要素を持つことを期待します.
あなたは?次に行く!

フェッチの使用

FETCHはクライアント側のJavaScriptメソッドで、クライアント側のJavaScriptでAPIリクエストを作成できます.そのJavaScriptとデフォルトでは、クライアント側でそれを使用する何かをインストールする必要はありません.詳細を学ぶために、MDN page on Fetchを参照してください.
GETリクエストの例を示します

import { useState, useEffect } from "react";

export default function Post() {
    const [posts, setPosts] = useState([]);
    const url = "https://jsonplaceholder.typicode.com/posts";

    // We add the `async` keyword to enable the use of `await`
    const getPosts = async () => {
    // The `await` keyword ensures the request is fulfilled
        // before the result is returned
        try {
            const response = await fetch(url);
// The response is parsed to JSON so we can manipulate it easily
            const data = response.json();
            setPosts(data);
        } catch (error) {
            console.log(error);
        }
    };
    useEffect(() => {
        getPosts();
    }, []);
    return (
        <>
            {posts.map((post, index) => (
                <div key={index}>
                    <h1>{post.title}</h1>
                    <p>{post.body}</p>
                </div>
            ))}
        </>
    );
}

axosを使う

AxiosはオープンソースのJavaScriptライブラリです.これは、ブラウザとノードのための約束ベースのHTTPクライアントです.jsあなたは、official documentationでそれについて詳しく知ることができます
まず、パッケージをアプリケーションの依存関係としてインストールする必要があります

NPMの使用

npm install axios 

糸の使用

yarn add axios

import { useState, useEffect } from "react";
import axios from "axios";

export default function Post() {
    const [posts, setPosts] = useState([]);
    const url = "https://jsonplaceholder.typicode.com/posts";

    const getPosts = async () => {
        try {
            const response = await axios(url);
            setPosts(response.data);
        } catch (error) {
            console.log(error);
        }
    };

    useEffect(() => {
        getPosts();
    }, []);
    return (
        <>
            {posts.map((post, index) => (
                <div key={index}>
                    <h1>{post.title}</h1>
                    <p>{post.body}</p>
                </div>
            ))}
        </>
    );
}

要約すると、getPosts関数を定義し、コンポーネントを読み込むときに1回だけ実行させます(依存性の空の配列をuseeffectの2番目の引数として渡すと、how it worksを参照ください).
また、我々のコードをより読みやすくし、より効率的にエラーを処理するためにtry/catchを使用します.
FETCHとAxiosを使用することの最も顕著な違いは、あなたがAXIOSでJSONへの応答をフェッチとして解析する必要がないことです.また、Axios応答はarrayのようなフェッチではなく、JavaScript objectで、実際のデータはdataキーにあります.記事の短いと簡単に私はGETのリクエストを行ったが、ポストのような他のHTTPのリクエストを行うことができますし、削除するなど、フェッチとAxiosを使用して削除する.
それだ!