在 Web 开发中，前端和后端是分离的两个部分，这意味着前端需要与后端进行通信，例如获取数据或提交表单。然而，在这个通信过程中，难免会出现错误信息。这时，前端应该如何正确处理这些错误信息呢？本篇文章将介绍 Next.js 中如何处理后台返回的错误信息。
错误处理
在传统的 Web 开发中，前端一般是通过 Ajax 请求与后端进行通信。而在 Next.js 中，页面渲染发生在服务端，处理数据请求的方法也有所不同。Next.js 最常用的请求方法是 getInitialProps，该方法在页面首次加载时会被自动调用，返回一个包含数据的 props 对象，供组件使用。
因此，处理错误信息时，需要在 getInitialProps 中进行。具体流程如下：
- 向后端发送数据请求；
- 根据请求结果判断是否为错误信息；
- 如果是错误信息，处理错误信息并返回一个错误对象；
- 如果不是错误信息，将数据塞入 props 对象并返回。
示例代码：
// www.javascriptcn.com code example
import fetch from 'isomorphic-unfetch';
const MyPage = ({ data, error }) => {
if (error) {
return <div>{error.message}</div>;
}
return (
<div>
{data.map((item) => (
<div key={item.id}>{item.title}</div>
))}
</div>
);
};
MyPage.getInitialProps = async ({ req }) => {
try {
const res = await fetch('http://localhost:3000/api/data');
const data = await res.json();
if (res.status !== 200) {
return { error: { code: res.status, message: data.message } };
}
return { data };
} catch (error) {
return { error };
}
};
export default MyPage;在上述代码中，我们向后端发送了一个数据请求，并通过 res.json() 方法将响应数据转换为 JSON 对象。如果响应状态为 200，表示请求成功，将数据塞入 props 对象并返回。如果响应状态为其他，表示请求失败，返回一个包含错误码和错误信息的对象。如果遇到异常错误，同样返回一个错误对象。在组件中，通过判断 props 中是否存在 error 对象，来决定该如何展示页面。
错误处理组件
在上述示例代码中，错误信息被塞入了 props 对象中并传递给了组件，但是对于大型项目，错误信息可能分布在多个组件中，每次都传递 props 对象显得有些冗余。因此，我们可以将错误处理逻辑封装在一个专门的组件中，减少代码冗余。
示例代码：
// www.javascriptcn.com code example
import Error from 'next/error';
import fetch from 'isomorphic-unfetch';
const MyPage = ({ data }) => (
<div>
{data.map((item) => (
<div key={item.id}>{item.title}</div>
))}
</div>
);
MyPage.getInitialProps = async ({ req }) => {
try {
const res = await fetch('http://localhost:3000/api/data');
const data = await res.json();
if (res.status !== 200) {
return { statusCode: res.status, message: data.message };
}
return { data };
} catch (error) {
return { statusCode: 500, message: 'Internal Server Error' };
}
};
const withError = (Component) => ({ statusCode, message, ...props }) => {
if (statusCode) {
return <Error statusCode={statusCode} title={message} />;
}
return <Component {...props} />;
};
export default withError(MyPage);在上述代码中，我们通过 withError 高阶组件封装了错误处理逻辑。withError 的参数是需要进行错误处理的组件，返回的是一个函数式组件。该函数式组件接收一个包含错误信息的对象作为参数，如果存在错误信息，返回一个 Error 组件，否则返回原组件。在实际使用中，只需要将需要进行错误处理的组件通过 withError 函数进行包裹即可。
小结
本篇文章介绍了 Next.js 中如何处理后台返回的错误信息。通过编写错误处理逻辑和封装错误处理组件，可以让应用程序更健壮、更易于维护。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67cffd06e46428fe9ec64767