💡 如果还不了解 HTML 、 CSS和JS，可以参考本号下的 HTML21 天入门教程、 CSS 21 天入门教程和JS21天入门教程。

在 React 应用中实现 AJAX 请求，有以下两种方式：

1. 使用 window.fetch API。
2. 使用第三方库如 axios、JQuery 等。

无论使用哪一种，基本上实现的都是副作用，而前面说过，副作用使用 useEffect 钩子来处理。

一个例子

假设现在有一个获取 Course 的 API，它返回的数据如下：

{  "courses": [    { "id": 1, "name": "HTML入门",  "description": "基础课程。" },    { "id": 2, "name": "CSS入门", "description": "基础课程。" },    { "id": 3, "name": "JavaScript入门", "description": "基础课程。" },  ] } 

现在需要调用此 API 获取提供的数据，并显示在页面上。

CourseComponent 组件实现这个功能。

function CourseComponent() {  const [error, setError] = useState(null);  const [isLoaded, setIsLoaded] = useState(false);  const [courses, setCourses] = useState([]);   useEffect(() => {    fetch("https://api.xxx.com/courses") //返回上述JSON格式的数据。      .then(res => res.json())      .then(        (result) => {          setIsLoaded(true);          setCourses(result);        },        (error) => {          setIsLoaded(true);          setError(error);        }      )  }, [])   if (error) {    return <div>Error: {error.message}</div>;  } else if (!isLoaded) {    return <div>Loading...</div>;  } else {    return (      <div>        <ul>          {courses.map(course => (            <li key={course.id}>              {course.name}： {course.description}            </li>          ))}        </ul>      </div>    );  } } 

上述代码中的 useEffect 中，通过 fetch 方法调用 courses 的 API。

这里同时加上错误处理，这是好的习惯。

在 return 里，通过 map 方法遍历 courses 的值，并通过列表呈现出来。

使用 axios 库

以上代码可以使用 axios 库来实现。

因为 axios 是第三方库，使用前需要安装它。

使用 npm 通过命令 npm install axios 安装。

然后，在组件代码中引入它。

import axios from 'axios';  function CourseComponent() {  const [error, setError] = useState(null);  const [isLoaded, setIsLoaded] = useState(false);  const [courses, setCourses] = useState([]);   useEffect(() => {    axios.get("https://api.xxx.com/courses") //返回上述JSON格式的数据。      .then(res => res.json())      .then(        (result) => {          setIsLoaded(true);          setCourses(result);        },        (error) => {          setIsLoaded(true);          setError(error);        }      )  }, [])   if (error) {    return <div>Error: {error.message}</div>;  } else if (!isLoaded) {    return <div>Loading...</div>;  } else {    return (      <div>        <ul>          {courses.map(course => (            <li key={course.id}>              {course.name}： {course.description}            </li>          ))}        </ul>      </div>    );  } } 

以上这种在 Effect 中直接写 fetch 请求是一种常见的数据获取方式。

但是这种方法有很多需要手动处理的部分，且有明显的弊端。

因此对于正式的项目，React 官方首推使用基于 React 的框架，比如说 next.js，这种框架里内置有数据获取方式。

它会解决直接写 fetch 带来的比如，效率低，不够简洁之类的弊端。

总结

最后来总结一下今天的内容要点：

• 🍑 在 React 中实现 AJAX 请求可以通过 fetch API 或第三方库。
• 🍑 在 useEffect 钩子中处理 AJAX 这样的副作用。
• 🍑 在正式的项目中，不推荐自己处理数据请求 fetch，而是推荐使用框架内置的数据获取方式。