chevron_left

React 实践教程
免费
第 3.6 回

教程文档

React 实践教程 - useEffect 中的错误处理

2023年12月20日
React 实践教程

useEffect 中的错误处理

项目运行中，碰到接口错误也是很正常的事情。考虑的方案是，如果接口读取错误，就显示一个错误提示信息，还可以点击"立即重试"按钮，重新请求接口。

实现方法

  • 故意把接口地址改错。
  • 在state中增加error和setError。
  • fetchData中，在请求开始前，设置error为false。
  • axios请求出错后，在catch设置error为true。
  • html中，根据error值，判断是否显示错误提示。
  • 有时候是网络故障导致的，所以还放上了立即重试按钮。点击后，直接调用fetchData方法即可。
import React, {useState, useEffect} from 'react';
import axios from 'axios';

function App() {
  const [data, setData] = useState({
    courses: []
  });
  const [keyword, se...
请登录后查看更多expand_more

课程介绍

「长乐未央」出品的 React 开发教程。

React 是用于构建用户界面的 JavaScript 库，起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设 Instagram 的网站。做出来以后，发现这套东西很好用，就在 2013 年 5 月开源了。

由于 React 的设计思想极其独特，属于革命性创新，性能出众，代码逻辑却非常简单。所以，越来越多的人开始关注和使用，认为它可能是将来 Web 开发的主流工具。

这个项目本身也越滚越大，从最早的 UI 引擎变成了一整套前后端通吃的 Web App 解决方案。衍生的 React Native 项目，目标更是宏伟，希望用写 Web App 的方式去写 Native App。如果能够实现，整个互联网行业都会被颠覆，因为同一组人只需要写一次 UI，就能同时运行在服务器、浏览器和手机。

React 主要用于构建 UI。你可以在 React 里传递多种类型的参数，如声明代码，帮助你渲染出 UI、也可以是静态的 HTML DOM 元素、也可以传递动态变量、甚至是可交互的应用组件。

  1. 声明式设计：React 采用声明范式，可以轻松描述应用。
  2. 高效：React 通过对 DOM 的模拟，最大限度地减少与 DOM 的交互。
  3. 灵活：React 可以与已知的库或框架很好地配合。

目录

适合这样的人

有一定开发基础，最好之前学过Vue的同学

授课老师