学习使用 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请求以获取或发送数据。
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('数据获取请求已完成');
}
}
获取数据()全屏 退出全屏
试试这个嵌入，运行一下上面提到的代码示例。
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
随时随地看视频
