Data Fetching from API

***レコーダなしで無料で受講できるRealtJSコース、個人の参考**
通常、JSでデータを取得する方法はfetch()を使用します.
しかし、もっと良い方法があります.axiosはそれです.
△Axiosはfetchの上の小さな層で、後で勉強し直します.
このプロジェクトでは、YTSというAPIが使用されます.
YTSは違法トレン形式で映画をダウンロードするサイトなのでURLはどんどん変更されます.
だから私はNiko先生が固定したURLを使います.
該当するURLにアクセスします.

スクロールすることで多くの情報を知ることができます.
しかし、このAPIを直接使用するには、使用するデータ(授業でgrafthedataと表す)を把握する必要があります.
このプロセスでaxiosが使用されます.

まず、コードの内容を表示するよりも、
axiosを使用すると、必要なapiが得られたことを確認するだけです.
上を実行し、開発者ツールを使用してネットワークを確認します.以下に示します.

Axiosが何を求めているのかが見えます.
では、コードをよく見てみましょう.

レッスン内容により、
Axios.getは常に高速関数ではありません.
表示が少し遅い.
したがって、getMovies()を非同期関数(非同期関数)として宣言し、getMovies()が実行完了するまで時間がかかることを示す必要があります.
async()とawaitを使用して検証できます.
まず、async()を使用して、関数がタスクを待つ必要があることを通知します.
Axiosの前にwaitを追加し、axiosに待つ必要があることを伝えます.
上記のコードの全体的な流れを理解してみましょう.
まず、アプリケーションが表示されると

州を定義します.isLoading=trueで、moviesという空の配列を生成します.

render()でisLoadingがアクティブなため、画面に「Now Loading」が出力されます.

アプリケーションが正常にマウントされたため、getMovies関数が呼び出されます.

getMovies()は非同期で実行されます.すなわちaxiosです.getの完了を待つ.(await)

では、私たちが得たapiを理解する必要があります.

上図に示すように、console.logを利用してshongで出力してみます.

私たちが最初に使用するデータはmovieのリストです.
次にmovieのリストを以下に示します.

data–data–data–映画に相当します.
したがって、Moviesは以下のようになります.data.data.映画を印刷すると

console.log(movies.data.data.movies;

このようにして20個の映画カタログを抽出することができます.
しかし、そんなに無知に書けば、きれいにはなりません.

上記の図に示すように、apiのdata-data-moviesはより簡潔です.
(でも正直ここまでは思っていなかったような…)
今私たちがしなければならないのはgetmoviesの映画です.
すなわち,apiからaxiosで得られたmovieのlistを状態movies[]に入れる.
また、すべてのmovie listをインポートすると、ロードが終了するため、このセクションを変更する必要があります.

This.setState({movies, isLoading : false});

と書く
apiから映画のインポートに成功すると、

上のような窓が見えます!
しかし、ロードが完了すると、私たちが見たいのは「We are ready」という文だけではありません.
映画の情報を知りたいです.
追加のjsファイル(movies.js)を作成し、続行します.
PropType:
react素子のpropに渡す入力値のタイプを定義できます.

Functional componentのパラメータでpropsの特定値を取得する場合は、カッコで囲みます!
最後はアプリjsで関連コンテンツをレンダリングすればいいです.

レンダリングする内容はAppclassのstate内部のmovies[]データです.
したがって

Mapを利用して簡潔に仕上げました.