利用React 自定义Hooks实现业务逻辑复用实例(1)，资深web前端开发

// PostsAndTodos.js

useEffect(() => {

const loadPosts = async () => {

setIsPostsLoading(true);

try {

let response = await fetch(

“https://jsonplaceholder.typicode.com/posts?_limit=5”

);

let data = await response.json();

setPosts(data);

} catch (e) {

console.log(e);

}

setIsPostsLoading(false);

};

loadPosts();

}, []);

1. 我们首先在 useEffect 里定义了 loadPosts() 函数，用来请求远程数据。

2. 在loadPosts()函数里，我们在请求开始，设置加载状态为true，在结束时，无论是否出错，都把加载状态设置为false。

3. 然后函数中间，我们发起请求，把返回的数据更新到 state 中。

加载 Todos

---

加载 todos 的代码和加载 posts 的代码基本相同，只是请求的 url 和更新状态的函数名不同：

// PostsAndTodos.js

useEffect(() => {

const loadTodos = async () => {

setIsTodosLoading(true);

try {

let response = await fetch(

“https://jsonplaceholder.typicode.com/todos?_limit=5”

);

let data = await response.json();

setTodos(data);

} catch (e) {

console.log(e);

} finally {

setIsTodosLoading(false);

}

};

loadTodos();

}, []);

展示数据

---

我们这里简单的使用 <ul> 和 <li> 展示 posts 和 todos 的列表：

Posts