マルチリクエスト[react]axiosリクエスト、オープンフィールドプレーヤーの変更

従来制トイプロジェクトとしてのオープンプレイヤーは、50個の落ち着いたチャンネルのプレイリストのみを導入した半プレイヤーであり、それ以前から落ち着いたチャンネルのすべてのプレイリストを読み込んで修正したいと考えていた.結論は成功した…!

すべてのプレイリストを読み込み

https://developers.google.com/youtube/v3/docs/playlists/list
YouTube apiでnextPageToken属性を使えばいいです.
まず落ち着いたマンチャンネルのプレイリストを調べてnextPageTokenの値を覚えて、今50個のプレイリストしかロードしていません

このnextPageTokenの値をpageTokenパラメータに挿入し、再照会すると、以下の50のプレイリストが表示されます.次の50プレイリストは、残りのプレイリストを読み込みたい場合はnextPageTokenの値を再要求できます.すべてのロードのために、私はずっと要求しています.最後に達すると、nextPageTokenの値は出ません.
これらのプレイリストをすべて保存してレンダリングしたいのですが、nextPageTokenの値を見つけて配列に保存し、axiosリクエストを複数回発行してstateに入れる方法です.

const nextPageToken = ["CDIQAA", "CGQQAA", "CJYBEAA"];

まずハードコーディングで、もっと良い方法があるようです.
この値を利用してaxiosリクエストを複数回発行すべきであり,userEffect hookを複数回使用してgetリクエストを受信してもうまく動作する.しかしコードも汚いので、一度ロードする方法はないかと思っています.

axiosリクエスト複数回

axios all

 useEffect(() => {
    axios
      .all([요청할 req1, req2, req3...])
      .then(
        axios.spread((res1, res2, res3, res4) => {
          //do someting....
        })
      )
      .catch(() => {});
  }, []);

axiosallリクエストは複数回送信できます!受信した応答は、拡散要求の形式で受け入れられるべきである.

マイコード

 useEffect(() => {
    axios
      .all([
        axios.get(
          `${YOUTUBE_API_URL}&pageToken=CDIQAQ&maxResults=50&key=${key}`
        ),
        axios.get(
          `${YOUTUBE_API_URL}&pageToken=${nextPageToken[0]}&maxResults=50&key=${key}`
        ),
        axios.get(
          `${YOUTUBE_API_URL}&pageToken=${nextPageToken[1]}&maxResults=50&key=${key}`
        ),
        axios.get(
          `${YOUTUBE_API_URL}&pageToken=${nextPageToken[2]}&maxResults=50&key=${key}`
        ),
      ])
      .then(
        axios.spread((res1, res2, res3, res4) => {
          const data1 = res1.data.items;
          const data2 = res2.data.items;
          const data3 = res3.data.items;
          const data4 = res4.data.items;
          const res = [...data1, ...data2, ...data3, ...data4];
          setPlaylist(res);
          setLoading(false);
        })
      )
      .catch(() => {});
  }, []);
 console.log(playlist);

前に入っていたnextPageTokenの値をセットし、getリクエストを4回提出し、得られた応答を1つのstateに入れた.
最後にコンソールウィンドウで確認しました.
落ち着いたマンチャンネル192個のプレイリスト(親なし開放...)インポートは良好で、ステータスは良好に保存されています.その後、コードに修正が必要な箇所はありません.


みんな歌が上手で、ボタンがたくさん出てきて、はははは、落ち着いた日常娯楽放送カタログに入りました.