axios 报错提示框

在Web开发中，Axios 是一个常用的基于 promise 的 HTTP 客户端，用于浏览器和 node.js，它是一个非常强大的工具，可以帮助我们发送异步 HTTP 请求到 REST endpoints 并接收响应，在使用 Axios 发送请求时，我们可能会遇到各种错误，为了提供良好的用户体验，通常需要在前端实现一个报错提示框来展示这些错误信息。,当 Axios 请求失败时，它会返回一个错误对象，通常包含状态码、状态文本、错误消息等，在本文中，我们将讨论如何捕获这些错误，并以一个详细的报错提示框的形式向用户展示。,错误处理,我们需要在发送请求时正确处理错误，这可以通过使用
.catch() 方法或使用
try...catch 语句来实现。,使用
.catch(),使用
try...catch,报错提示框,接下来，我们需要定义
showErrorMessage 函数，这个函数将创建一个提示框并显示错误信息。,详细的错误信息,在上述
showErrorMessage 函数中，我们构建了一个包含详细错误信息的提示框，根据错误的类型，我们提取不同的信息：,
error.response: 如果服务器返回了一个响应（即状态码不在 2xx 范围内），我们会显示状态码、状态文本和响应数据。,
error.request: 如果请求已发出但未收到响应，我们会显示一条消息表明没有收到响应。,
error.message: 如果在设置请求时出现了问题，我们会显示错误消息。,提示框包括一个关闭按钮，允许用户关闭提示框，样式可以根据具体的网站设计进行调整。,总结,本文详细介绍了如何在前端使用 Axios 处理请求错误，并实现了一个自定义的报错提示框，通过捕获 Axios 请求中的错误，并以用户友好的方式展示错误信息，我们可以显著提高应用程序的可用性和用户体验，在实际开发中，根据实际需要，我们可以进一步定制提示框的视觉风格和行为，确保它能够与我们的应用程序无缝集成。, ,axios.get(‘/api/data’) .then(response => { // 处理响应数据 }) .catch(error => { // 处理错误 showErrorMessage(error); });,async function fetchData() { try { const response = await axios.get(‘/api/data’); // 处理响应数据 } catch (error) { // 处理错误 showErrorMessage(error); } },function showErrorMessage(error) { // 创建一个元素用于提示框 const errorModal = document.createElement(‘div’); errorModal.className = ‘errormodal’; // 设置提示框样式 errorModal.style.position = ‘fixed’; errorModal.style.top = ‘20%’; errorModal.style.left = ‘50%’; errorModal.style.transform = ‘translate(50%, 50%)’; errorModal.style.backgroundColor = ‘white’; errorModal.style.padding = ’20px’; errorModal.style.zIndex = ‘1000’; errorModal.style.borderRadius = ‘5px’; errorModal.style.boxShadow = ‘0 2px 10px rgba(0, 0, 0, 0.5)’; // 错误信息字符串 let errorMessage = ”; // 如果是 Axios 的错误实例，我们可以获取更多详细信息 if (error.response) { // 请求已发出，服务器响应的状态码不在 2xx 范围 errorMessage += `Error: ${error.response.status} ${error.response.statusText} `; errorMessage +=
Error Data: ${JSON.stringify(error.response.data)}; } else if (error.request) { // 请求已经成功发起，但没有收到响应 errorMessage += ‘No response received’; } else { // 发送请求时出了点问题 errorMessage +=
Error: ${error.message}; } // 将错误信息设置为提示框的内容 errorModal.textContent = errorMessage; // 关闭按钮 const closeButton = document.createElement(‘button’); closeButton.textContent = ‘Close’; closeButton.style.position = ‘absolute’; closeButton.style.top = ‘5px’; closeButton.style.right = ‘5px’; closeButton.onclick = function() { document.body.removeChild(errorModal); }; // 将关闭按钮添加到提示框 errorModal.appendChild(closeButton); // 将提示框添加到 body document.body.appendChild(errorModal); },