JavaScript与React中的API处理：从基础到高手级别

学习使用 fetch 和 axios 以及错误处理方法来处理 JavaScript API。处理 API 指的是向服务器发起 HTTP 请求以获取和发送数据。

大家好，各位前端开发的朋友们，今天我想谈谈javascript中的一个非常重要的话题，即如何处理API。

• 我将会先在我的代码片段中使用Scribbler.live，这是一个超级棒的平台，允许你运行JavaScript笔记本、在线编译器和编辑器，而无需手动设置。
• 此外，我还将包含一个链接，你可以直接打开并运行这些代码片段来查看结果。
• 我将使用scrib.show（来自scribbler.live），它等同于console.log。
• 暂时我只会把fetch API的示例添加到scribbler中，因为目前它还不支持axios和React。

让我们跳进去吧

目录表

• 什么是 API
• 什么是 API 调用
• HTTP 方法

• 在 JavaScript 中调用 API

• Fetch 方法

• Axios

• React

• Tanstack 查询库
• 结论

• API是一套定义和协议，让两个软件组件能够相互沟通。

• 编写API可以用到一些技术，比如：

• Javascript（Express框架）

• Python（Django框架）

• Go（Gin框架）

• Java（Spring Boot框架）

• C#（ASP.NET Core框架）等

在JavaScript和React应用中，通常会使用fetch、Axios或者React Query、TanStack Query等库来进行API调用。API处理是指向服务器发送HTTP请求以获取或发送数据。

APIs 使用不同的 HTTP 方法，每种方法都有特定的用途。

• GET – 从服务器取数据。
• POST – 向服务器送新数据。
• PUT – 更新现有数据（替换全部资源）。
• PATCH – 更新现有资源的部分。
• DELETE – 从服务器删数据。

获取方法

原生的 fetch API 方法常用于与 API 进行交互。它接受两个参数——API 端点地址和传递头信息、正文、方法等选项的对象。

使用 GET 请求（一种 HTTP 请求方式）的获取方法

    fetch('https://jsonplaceholder.typicode.com/posts/1')
      .then(response => response.json())
      .then(data => scrib.show(data))
      .catch(error => scrib.show('错误：', error));

全屏切换

使用 POST 请求的 Fetch 方法

    fetch('https://jsonplaceholder.typicode.com/posts', {
      method: 'POST', // 请求方法 GET, POST, PUT, DELETE
      headers: {
        'Content-Type': 'application/json' // 如 referrer, bearer, content-type, 自定义头部等
      },
      // POST 请求的正文
      body: JSON.stringify({
        title: 'JavaScript 很棒',
        body: '你知道可以在 Scribbler 中同时编写 HTML 和 JavaScript 吗',
        userId: 1
      })
    })
      .then(response => response.json())
      .then(data => scrib.show(data))
      .catch(error => scrib.show('错误:', error));

切换到全屏，退出全屏

使用 fetch 方法来处理网络请求的错误

    fetch('https://jsonplaceho.typicode.com/posts') // 错误的 API 终点
      .then(response => response.json())
      .then(data => scrib.show(data))
      .catch(error => scrib.show('错误:', error)); 

切换到全屏模式，退出全屏

使用 try-catch-finally 块来处理 API 请求

    async function 获取数据() {
      try {
        let 响应 = await fetch('https://jsonplaceholder.typicode.com/posts/1');
        if (!响应.ok) throw new Error('网络响应未成功，请求错误');
        let 数据 = await 响应.json();
        scrib.show(数据);
      } catch (错误) {
        scrib.show('数据获取失败:', 错误);
      } finally {
        scrib.show('数据获取请求已完成');
      }
    }
    获取数据()

全屏 退出全屏

试试这个嵌入，运行一下上面提到的代码示例。

（在线编辑器）(https://app.scribbler.live/?jsnb=github:ShubhamTiwari909/api-handling-scribbler/fetch-method&hide-menu=true&hide-code=false)。这是一个在线代码编辑器，你可以在这里尝试修改和运行代码。

Axios （一个JavaScript库）

Axios 是一个用于简化处理 API 并提供更好的错误处理的 JavaScript 库。

带有 GET 请求的 Axios

    import axios from "axios"

    // 所有 HTTP 请求都可以通过 axios 链式调用
    axios.get('https://jsonplaceholder.typicode.com/posts/1')
      .then(response => scrib.show(response.data))
      .catch(error => scrib.show('出错:', error));

全屏模式退出全屏

Axios 的 POST 请求

    import axios from "axios"

    // JSON body 作为第二个参数传递，其余配置作为第三个参数
    axios.post('https://jsonplaceholder.typicode.com/posts', {
       title: 'Javascript 太棒了',
        body: '你知道你可以在书写器中同时编写 HTML 和 JavaScript 吗',
        userId: 1
    }, {
      headers: { 'Content-Type': 'application/json' }
    })
      .then(response => scrib.show(response.data)) // 自动将响应转换为 JSON 格式
      .catch(error => scrib.show('错误：', error));

全屏。退出。

使用axios进行错误处理……

    import axios from "axios"

    axios.get('https://jsonpl.typicode.com/posts') // 错误的网址
      .then(response => scrib.show(response.data))
      .catch(error => {
    // 针对不同情况的错误处理
        if (error.response) {
          scrib.show('服务器返回的状态码是：', error.response.status);
        } else if (error.request) {
          scrib.show('没有收到响应');
        } else {
          scrib.show('请求设置出错：', error.message);
        }
      });

全屏模式 退出全屏

使用 try catch finally 块，来处理 API 请求

    import axios from "axios";

    const fetchData = async () => {
      try {
        const response = await axios.get("https://jsonplaceholder.typicode.com/posts");
        console.log("数据获取成功，如下：", response.data);
        return response.data;
      } catch (error) {
        console.error("获取数据失败:", error.response?.data || error.message);
        return null;
      } finally {
        console.log("获取完成")
      }
    };

    fetchData();

全屏模式，按一下退出。

使用 useEffect 和 useState 的 React（React 中的两个重要 Hook）

    import { useEffect, useState } from 'react';

    function Posts() {
      // 用于数据和错误消息的状态
      const [posts, setPosts] = useState([]);
      const [error, setError] = useState(null);

      // 在 useEffect 中执行数据获取，仅在页面加载时运行一次
      useEffect(() => {
        fetch('https://jsonplaceholder.typicode.com/posts')
          .then(response => {
            if (!response.ok) {
              throw new Error('获取失败');
            }
            return response.json();
          })
          .then(data => setPosts(data))
          .catch(error => setError(error.message));
      }, []);

      if (error) return <p>错误: {error}</p>;

      return (
        <div>
          <h2>帖子</h2>
          <ul>
            {posts.map(post => (
              <li key={post.id}>{post.title}</li>
            ))}
          </ul>
        </div>
      );
    }

    export default Posts;

切换到全屏模式 退出全屏

Tanstack 查询

    import { useQuery } from '@tanstack/react-query';
    import axios from 'axios';

    // 获取帖子数据后返回
    const fetchPosts = async () => {
      const { data } = await axios.get('https://jsonplaceholder.typicode.com/posts');
      return data;
    };

    function Posts() {
      // TanStack 自带了数据、错误和加载的状态
      const { data: 帖子列表, error, isLoading } = useQuery({ queryKey: ['posts'], queryFn: fetchPosts });

      if (isLoading) return <p>加载中...</p>;
      if (error) return <p>错误信息: {error.message}</p>;

      return (
        <ul>
          {帖子列表.map(post => (
            <li key={post.id}>{post.title}</li>
          ))}
        </ul>
      );
    }

    export default Posts;

点击这里全屏开启，再点击退出全屏

在JavaScript和React中处理API包括：

• 使用 fetch 或 Axios 来进行 API 请求。
• 处理不同的 HTTP 方法，如 GET、POST、PUT 和 DELETE。
• 实现适当的错误处理。
• 设置认证所需的头部信息。
• 在 React 中使用 useEffect 来发起 API 请求。
• 利用 React Query 实现高效的状态管理。

就这样，这篇帖子就说这么多吧，如果这篇文章还有需要改进的地方，请告诉我。别忘了去看Scribbler.live网站。

Instagram - https://www.instagram.com/supremacism__shubh/
LinkedIn - https://www.linkedin.com/in/shubham-tiwari-b7544b193/
电子邮件 - shubhmtiwri00@gmail.com

谢谢，你可以通过下面的链接支持我一些小额捐款👇
https://www.buymeacoffee.com/waaduheck

你也看看这些帖子吧

## 使用 CVA 和 Tailwind 的按钮组件 Shubham Tiwari ・ 2月12日, 2024 #nextjs #react #web开发 #typescript

08:22 ## 微前端 - React | Solid | Vue Shubham Tiwari ・ 2024年1月9日 #教程 #Web开发 #初学者 #学习

15:48 ## Codium | 程序员的AI助手 Shubham Tiwari ・ 2024年1月4日 #vscode #学习编程 #教程 #新手

05:25 ## Zustand - 初学者指南 Shubham Tiwari · 2023年11月21日 #webdev #教程 #react #javascript