从服务器获取数据

学习笔记：从服务器获取数据

1. 前端与后端的交互

• 前端：主要负责用户界面的展示和交互，运行在浏览器中。
• 后端：负责数据的存储、处理和提供，通常通过API与前端通信。

2. 使用 JSON Server 模拟后端

• JSON Server 是一个轻量级的工具，用于模拟后端服务。
• 在项目根目录下创建 db.json 文件，定义初始数据。
• 使用 npx json-server --port 3001 --watch db.json 启动服务器，默认监听 http://localhost:3001。

3. JavaScript 异步编程

• 同步与异步：JavaScript 是单线程的，异步编程用于避免阻塞主线程。
• Promise：代表异步操作的对象，有三种状态：pending（进行中）、fulfilled（成功）、rejected（失败）。
• fetch：现代浏览器提供的异步请求方法，基于 Promise。
• axios：一个更易用的 HTTP 客户端库，功能类似于 fetch。

4. 使用 axios 获取数据

• 安装 axios：npm install axios。
• 使用 axios 发起请求：

  axios.get('http://localhost:3001/notes')
    .then(response => {
      console.log(response.data);
    });
  

5. React 中的 Effect Hook

• useEffect 是 React 中用于处理副作用的钩子。
• 用于在组件渲染后执行异步操作，例如从服务器获取数据。
• 示例代码：

  useEffect(() => {
    axios.get('http://localhost:3001/notes')
      .then(response => {
        setNotes(response.data);
      });
  }, []);
  

• 第二个参数为依赖数组，为空数组时，仅在组件首次渲染时执行。

6. 开发环境与部署

• 开发环境：使用 npm start 启动 React 开发服务器，json-server 提供模拟数据。
• 部署：将前端代码部署到服务器，后端服务提供实际数据。

7. 练习与扩展

• 练习 2.11：使用 JSON Server 存储电话簿数据，通过 axios 获取并显示。
• 练习 2.12：使用 REST Countries API 获取国家数据，根据用户输入显示匹配结果。
• 练习 2.13：为每个国家添加按钮，点击后显示详细信息。
• 练习 2.14：集成 OpenWeatherMap API，显示国家首都的天气信息。

8. 环境变量

• 使用环境变量存储敏感信息（如 API 密钥）。
• 示例：

  REACT_APP_API_KEY=your_api_key
  

• 在代码中通过 process.env.REACT_APP_API_KEY 访问。