每个 HTTP 请求的 5 个支柱
要求
请求或 HTTP 请求是发送到服务器以获取某些内容或发送某些信息的操作。这包括服务器的 URL、请求的标头和正文。
将要解释的大部分内容对于请求某些信息很重要，但也可以在发送信息时应用。
加载中
为您的用户显示加载信息是请求的重要步骤，因为我们永远不知道网络上会发生什么，也许连接很慢，也许服务器因为大量请求而变慢了。
显示一个加载器，或者一个表明请求仍在进行中的文本是一个额外的步骤，可以让你的应用程序看起来更专业，对用户更友好，而不是认为每个人都有快速的互联网连接。
您可以在您最喜欢的浏览器（例如 Firefox 或 Google Chrome）中模拟来自开发者控制台的减慢请求。
错误
事情发生在网络中，除了代码内部发生的事情之外，我们无法控制一切。
网络可能会暂时关闭，或者用户已激活飞行模式，或者服务器已关闭一段时间。我们永远不知道可能会出现什么样的问题，或者何时会发生，但我们知道可能会出现一些问题，并且我们必须对此做出解释。
在代码中考虑这些事情是一个很好的做法，尤其是在 JavaScript 中，因为发送请求通常涉及使用 Promise，并且 Promise 可能处于拒绝状态。
您还可以从开发者控制台在浏览器中模拟离线连接。
可取消
如果您计划从远程 API 向用户提供数据，至少提供一种取消这些请求的方法。
这是一个很好的做法，并且在任何应用程序中都会增加用户体验，因为从远程服务器获取巨大的有效负载对于使用数据计划的用户来说可能代价高昂，并且有选择权是向用户展示您正在考虑每个人的好方法，即使是那些无力承担大量数据传输费用的人。
使用 JavaScript 和 Web API Fetch，您可以将信号与中止控制器结合使用，以提供取消请求的方法。
验证
最后，您发送了请求，一切都按计划进行，您收到了成功的回复。或者是吗？
您如何确定服务器不会在一天、一周或一年内更改其响应？您的应用程序可能会工作一段时间，但如果有人决定像往常一样发送带有属性的对象而不是数组，您可能会遇到麻烦，因为您将尝试迭代对象而不是数组，而这是不可能的JavaScript 中的开箱即用。
数据验证是一个重要的步骤，在某些情况下也可能是强制性的，因为即使您知道今天在做什么并且您是前端和后端应用程序的唯一开发人员，一年后您可能不会孤单，人们可能会加入战斗并帮助你。
如果你从一个长假回来并且 API 发生了变化，至少通过数据验证你知道这是你考虑的情况并且你的应用程序不会突然崩溃（你甚至可能会得到更好的错误，这会导致你比没有数据验证更快地解决此错误）。
此外，通过数据验证，您可以依赖像 TypeScript 这样的强类型语言来确保一旦这些数据被解析和验证，您可以 100% 确定您可以对其进行迭代，而不用担心它在不久的将来可能会发生变化。
例子
以下是 React 中初学者应用程序的示例。
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 或 React 无关，只要您遵循这些步骤，就可以应用于几乎任何语言或任何框架和库。
- 点赞
- 收藏
- 关注作者
评论（0）