在 TypeScript 中使用 Fetch/XMLHttpRequest
本文解释了在 TypeScript 中的 Fetch/XMLHttpRequest。
您可以学习如何使用 Fetch API 和 XMLHttpRequest，以及它们之间的区别。
YouTube Video
在 TypeScript 中使用 Fetch/XMLHttpRequest
在 TypeScript 中，HTTP 请求主要通过两种 API 实现：Fetch API 和 XMLHttpRequest。通过使用 TypeScript，在使用这些 API 进行异步通信时，您可以为请求和响应引入类型检查，从而编写更安全的代码。下面，我们将介绍如何使用它们中的每一个。
Fetch API
Fetch API 是一个基于 Promise 的 API，用于简单地进行异步通信（HTTP 请求）。在 TypeScript 中，您可以使用 fetch 方法发出请求，并以类型安全的方式处理响应。
基本用法
下面是一个使用 GET 请求的基本示例。
1const url = 'https://jsonplaceholder.typicode.com/posts';
2
3fetch(url)
4 .then(response => {
5 if (!response.ok) {
6 throw new Error('Network response was not ok');
7 }
8 return response.json(); // Parse the response as JSON
9 })
10 .then(data => {
11 console.log(data);
12 })
13 .catch(error => {
14 console.error('Fetch error:', error);
15 });- 此代码向指定的URL发送一个
GET请求，将收到的响应解析为JSON，并将其输出到控制台。
TypeScript 中的类型安全数据处理
由于 fetch 方法的响应类型不明确，因此您可以通过显式定义响应类型，利用 TypeScript 的类型检查功能。
1// Define the type for the response data
2interface Post {
3 userId: number;
4 id: number;
5 title: string;
6 body: string;
7}
8
9const url = 'https://jsonplaceholder.typicode.com/posts';
10
11fetch(url)
12 .then(response => response.json())
13 .then((data: Post[]) => {
14 data.forEach(post => {
15 console.log(`Title: ${post.title}`);
16 });
17 })
18 .catch(error => {
19 console.error('Error fetching data:', error);
20 });- 此代码将
Post类型应用于通过fetch获取的数据，以类型安全的方式处理响应，并将每个帖子的标题输出到控制台。
POST 请求示例
在向服务器发送数据时，使用 POST 方法。为了在请求正文中发送 JSON，需要指定 headers 和 body。
1const postData = {
2 title: 'foo',
3 body: 'bar',
4 userId: 1
5};
6
7fetch('https://jsonplaceholder.typicode.com/posts', {
8 method: 'POST',
9 headers: {
10 'Content-Type': 'application/json'
11 },
12 body: JSON.stringify(postData)
13 })
14 .then(response => response.json())
15 .then(data => {
16 console.log('Created post:', data);
17 })
18 .catch(error => {
19 console.error('Error posting data:', error);
20 });- 此代码通过
POST请求以JSON格式向服务器发送数据，接收响应为JSON，并将其输出到控制台。
使用异步函数（async/await）的 Fetch
通过在 TypeScript 中使用 async/await，您可以更简单地编写异步处理。
1// Define the type for the response data
2interface Post {
3 userId: number;
4 id: number;
5 title: string;
6 body: string;
7}
8
9async function fetchPosts() {
10 try {
11 const response = await fetch('https://jsonplaceholder.typicode.com/posts');
12 if (!response.ok) {
13 throw new Error('Network response was not ok');
14 }
15 const data: Post[] = await response.json();
16 console.log(data);
17 } catch (error) {
18 console.error('Fetch error:', error);
19 }
20}
21
22fetchPosts();- 此代码使用
async/await语法异步获取帖子数据，将响应处理为Post[]类型，并将其输出到控制台。
XMLHttpRequest
XMLHttpRequest 是一种较老的 API，相比 Fetch API 略显复杂，但当需要浏览器兼容性或更高级的控制时可能会使用。
XMLHttpRequest 的基本用法
下面是一个使用 GET 请求的示例。
1const xhr = new XMLHttpRequest();
2xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts', true);
3
4xhr.onreadystatechange = function () {
5 if (xhr.readyState === 4 && xhr.status === 200) {
6 const data = JSON.parse(xhr.responseText);
7 console.log(data);
8 }
9};
10
11xhr.send();- 此代码使用
XMLHttpRequest向指定的URL发送GET请求，将响应解析为JSON，并将其输出到控制台。
POST 请求示例
在向服务器发送数据时，在 open 方法中指定 POST，并使用 send 发送数据。
1const xhr = new XMLHttpRequest();
2xhr.open('POST', 'https://jsonplaceholder.typicode.com/posts', true);
3xhr.setRequestHeader('Content-Type', 'application/json');
4
5const postData = JSON.stringify({
6 title: 'foo',
7 body: 'bar',
8 userId: 1
9});
10
11xhr.onreadystatechange = function () {
12 if (xhr.readyState === 4 && xhr.status === 201) {
13 console.log('Created post:', xhr.responseText);
14 }
15};
16
17xhr.send(postData);- 此代码使用
XMLHttpRequest通过POST请求以JSON格式向服务器发送数据，并将包含已创建数据的响应输出到控制台。
使用 XMLHttpRequest 的错误处理
您可以通过使用 onerror 事件处理请求错误。
1const xhr = new XMLHttpRequest();
2xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts', true);
3
4xhr.onerror = function () {
5 console.error('Request failed');
6};
7
8xhr.onload = function () {
9 if (xhr.status === 200) {
10 console.log('Response:', xhr.responseText);
11 } else {
12 console.error('Error:', xhr.status);
13 }
14};
15
16xhr.send();- 此代码使用
XMLHttpRequest执行GET请求，通过onerror处理请求错误，并在成功或失败时适当记录响应。
Fetch API 与 XMLHttpRequest 的比较
| 特性 | Fetch API | XMLHttpRequest |
|---|---|---|
| 现代 API | ○ | × |
| Promise 支持 | ○ | × |
| 可读性 | 高（与 async/await 配合良好） |
低（需要大量回调） |
| 浏览器兼容性 | 在某些旧浏览器中不支持 | 被所有主流浏览器支持 |
| 进度跟踪 | △（使用 ReadableStream 可以实现） |
○（提供 onprogress 事件） |
| 错误处理 | 错误在 Promise 链中捕获 | 需要使用 onerror |
总结
在 TypeScript 中，可以使用 Fetch API 简洁地编写异步请求，并保证类型安全的代码。另一方面，XMLHttpRequest 是一种较旧的 API，但在某些情况下可能仍会使用。通常建议使用简单且现代的 Fetch API，但如果需要浏览器兼容性或进度跟踪，也可以考虑使用 XMLHttpRequest。
您可以在我们的YouTube频道上使用Visual Studio Code跟随上述文章进行学习。 请也查看我们的YouTube频道。