json-server, axios

json-server
json-serverは,独立したサーバがない環境でフロントエンド作業を行う場合,短時間でREST APIを構築するライブラリである.
使用方法は以下の通りです.
1.$npm i-g json-server//インストール
2. db.json(jsonファイル名)ファイルの作成
3. $ json-server --watch db.json(jsonファイル名)--port 9000(使用するポート番号)
では、REST APIサーバが開きます.たとえば、http://localhost:9000/stores道。に入るとjsonデータを表示できます.
この過程で、以下のエラーが発生したため、3000台のローカルサーバのみを実行し、9000台のサーバを実行しなかったため、長い間悩んでいました.
//net::ERR_CONNECTION_REFUSED
2つのエディタ端末を開き、1つはローカルでアプリケーションを実行し、1つはjson-server-watchdbです.json--port 9000で別々に動作し、エラーが解決しました.
Axios
AxiosはブラウザNodejs向けPromise APIを利用したHTTP非同期通信ライブラリ.
1. $ npm i axios
2. import axios from 'axios'
3.

import axios from 'axios';

axios.get('https://localgost:9000/stores')
  .then((Response)=>{console.log(Response.data)})
  .catch((Error)=>{console.log(Error)})

使用方法は以下の通りです.

import Header from '../components/Header';
import React, { useEffect, useState } from 'react';
import axios from 'axios';
import Link from 'next/link';

export default function Store() {
  const [stores, setStores] = useState([]);
  useEffect(() => {
    axios.get('http://localhost:9000/stores')
    //.then((data) => console.log(data.data))
    .then(data => {
      setStores(data.data);
    });
  }, []);
  
  return (
    <div>
      <Header></Header>

      <div className="container">
        {stores.map((store) => (
        <div key={store.id} className="item">
          <Link
            href={{
              pathname: '/[id]',
              query: { id: store.id, name: store.name, image: store.image, description: store.description, url: store.url },
            }}>
            <img src={store.thumb}/>
          </Link>
        </div> 
        ))}
      </div>

    </div>
  )}