要求
请求或HTTP请求是发送到服务器以获取某些内容或发送一些信息的操作。这包括服务器的URL，请求的标题和正文。
将要解释的大部分内容对于请求某些信息很重要，但也可以在发送信息时应用。
加载
为您的用户显示加载信息是请求的重要步骤，因为我们永远不知道网络上会发生什么，也许连接速度很慢，也许由于众多请求，服务器会放慢速度。
显示加载程序或表明仍在提出请求的文本是一个额外的步骤，它可以使您的应用程序看起来更专业，并且比以为每个人都具有快速的Internet连接更为友好。
您可以在您喜欢的浏览器（例如Firefox或Google Chrome）中模拟开发人员控制台的速度放慢速度。
错误
事情发生在网络中，我们无法控制代码内发生的一切以外的所有事情。
该网络可能会暂时关闭，或者用户已激活飞机模式，或者服务器已经停止了一段时间。我们永远不知道可能存在什么样的问题，或者何时发生，但我们知道可能存在一些问题，我们必须考虑到这一点。
在代码中说明这些内容是一种很好的做法，尤其是在JavaScript中，因为发送请求通常涉及承诺，并且承诺可能处于拒绝状态。
您还可以通过开发人员控制台模拟浏览器中的离线连接。
可取消
如果您打算从远程API提供用户数据，至少提供了一种取消这些请求的方法。
这是一个很好的做法，并且在任何应用程序中增加了用户体验，因为从远程服务器中获得巨大的有效载荷对于数据计划中的用户而言可能会很昂贵，并且选择是一种很好的方式，可以向您的用户展示您的用户正在考虑每个人，甚至那些负担不起大量数据传输的人。
使用JavaScript和Web API获取，您可以将信号与流产控制器一起使用，以提供一种取消请求的方法。
验证
最后，您已经发送了一个请求，一切都按计划进行，您会获得成功的回复。还是？
您如何确定服务器不会在一天，一周或一年内更改其响应？您的应用程序可能会持续一段时间，但是如果有人决定以属性而不是像往常一样发送属性的对象，您可能会遇到麻烦，因为您将尝试迭代对象而不是不可能的数组 - javaScript中的框架。
数据验证是重要的一步，在某些情况下也可能是强制性的，因为即使您知道自己今天在做什么，并且您是前端和后端申请的唯一开发人员，您也可能不会在一年内孤单人们可能会加入战斗并为您提供帮助。
如果您从漫长的假期返回并且API发生了变化，至少在数据验证时，您知道这是您所考虑的情况，您的申请不会突然崩溃（您甚至可能会遇到更好的错误引导您比没有数据验证的更快地解决此错误）。
另外，通过数据验证，您可以依靠像打字稿一样强烈键入的语言来确保一旦将这些数据解析和验证，您会100％确保可以迭代它，而不是担心它可能会改变不久的将来。
例子
这是一个初学者应用程序在示例中的外观。
import React, { useEffect, useState } from "react";
export const App = () => {
const [users, setUsers] = useState([]);
useEffect(() => {
fetch("https://jsonplaceholder.typicode.com/users").then(response => {
return response.json();
}).then(newUsers => {
setUsers(newUsers);
});
}, []);
return (
<ul>
{users.map(user => (
<li key={user.id}>{user.username}</li>
))}
</ul>
);
};
您可以看到，没有加载状态，没有可取消请求，没有考虑错误或数据验证。
这是所有这些添加的东西可能的样子。
import React, { Fragment, useEffect, useState, useCallback } from "react";
const isValidUser = input => {
return typeof input === "object"
&& input !== null
&& typeof input.id === "number"
&& typeof input.username === "string";
}
const isValidUsers = users => {
if (!Array.isArray(users)) {
return false;
}
if (!users.every(user => isValidUser(user))) {
return false;
}
return true;
}
export const App = () => {
const [users, setUsers] = useState([]);
const [abortController, setAbortController] = useState(new AbortController());
const [error, setError] = useState(null);
const [loading, setLoading] = useState(false);
const cancel = useCallback(() => {
abortController.abort();
}, [abortController]);
useEffect(() => {
const newAbortController = new AbortController();
const { signal } = newAbortController;
setAbortController(newAbortController);
setError(null);
setLoading(true);
fetch("https://jsonplaceholder.typicode.com/users", {
signal
}).then(response => {
if (response.ok) {
return response.json();
}
return Promise.reject(new Error("Something went wrong"));
}).then(newUsers => {
if (!isValidUsers(newUsers)) {
throw new Error("Wrong response from the server");
}
setUsers(newUsers);
}).catch(error => {
setError(error);
}).finally(() => {
setLoading(false);
});
}, []);
return (
<Fragment>
{loading && (
<small>Loading, please wait...</small>
)}
{error && (
<small>{error.message}</small>
)}
<button onClick={cancel}>Cancel</button>
<ul>
{users.map(user => (
<li key={user.id}>{user.username}</li>
))}
</ul>
</Fragment>
);
};
当然没有应用样式，所以看起来很糟糕，但至少您明白了。
我们添加了一种取消请求的方法，加载指示可以放心用户，显示任何错误和基本数据验证机制，以确保我们获得的数据未损坏或已更改。
结论
我们看到，为了构建可靠的应用程序，每当我们向服务器提出请求时，我们必须遵循5个步骤：
- 发送适当的请求
- 显示加载状态
- 显示错误，如果有任何
- 使请求可取消
- 验证我们收到的数据
如果您设法遵循这些步骤，则将构建经过时间测试和坚固的高度可靠的应用程序。
这将在用户眼中立即使您的应用方式更好。
，只要您遵循这些步骤，这些概念与JavaScript也不挂钩，也可以应用于几乎任何语言或任何框架和库。
。