React请求后端数据

前言

学无止境，无止境学。坚持每天学点编程知识，坚持每天写点小文章，坚持每天进步一点点。大家好，我是张大鹏，喜欢学习和分享，希望能够通过此公众号，将自己学到的东西分享给大家，和大家一起交流，一起成长，一起进步。

乾坤未定，你我皆是黑马。大鹏一日同风起，扶摇直上九万里。宝剑锋从磨砺出，梅花香自苦寒来。不积跬步，无以至千里，不积小流无以成江海。

如果有多余的时间，就坚持学习吧，小时候学习改变命运，长大了学习丰富内涵，老了学习带来宁静。活到老，学到老，我能行！

概述

《React零基础入门班》收费说明：

时长：10节课

价格：1000元

内容：React从入门到项目实战

上课方式：腾讯会议小班教学

本篇文章是《React零基础入门班》的第10篇文章，前面还有：

《第一个React程序》

《React常用方法》

《React使用JSX开发菜谱应用》

《使用webpack让React模块化》

《React的状态管理》

《React组件事件通知》

《React实现Form表单》

《React上下文》

《React使用钩子增强组件》

fetch的基本用法

请求Github账户信息

核心代码：

fetch(`https://api.github.com/users/zhangdapeng520`)

.then(response => response.json())

.then(console.log)

.catch(console.error)

App.js

import CheckBox from "./components/CheckBox";

export default function App() {

fetch(`https://api.github.com/users/zhangdapeng520`)

.then(response => response.json())

.then(console.log)

.catch(console.error)

return (

)

}

基于异步

核心方法：

async function requestGithubUser(username) {

try {

const url = `https://api.github.com/users/$`

const response = await fetch(url)

const userData = await response.json()

console.log(userData)

} catch (error) {

console.error(error)

}

}

App.js

import CheckBox from "./components/CheckBox";

async function requestGithubUser(username) {

try {

const url = `https://api.github.com/users/$`

const response = await fetch(url)

const userData = await response.json()

console.log(userData)

} catch (error) {

console.error(error)

}

}

export default function App() {

requestGithubUser("zhangdapeng520")

return (

)

}

发送POST请求

fetch("/login",{

method: "POST",

body: JSON.stringify()

})

上传文件

const formData = new FormData();

formData.append("username", username);

formData.append("avatar", imgFile); // 文件

fetch("/upload", {

method: "POST",

body: formData

})

携带Token

fetch("/userinfo", {

method: "GET",

headers: {

Authorization: `Bearer $`

}

})

fetch的进阶用法

在组件中使用fetch获取Github用户信息

App.js

import from "react";

function GithubUser() {

// 数据

const [data, setData] = useState()

// 请求数据

useEffect(() => {

if (!username) return;

fetch(`https://api.github.com/users/$`)

.then(response => response.json())

.then(setData)

.catch(console.error)

}, [username])

if (data) {

return

}

return 暂无数据

}

export default function App() {

return (

)

}

保存用户信息

本地加载和保存数据：

const loadUser = key => key && JSON.parse(localStorage.getItem(key))

const saveUser = (key, user) => localStorage.setItem(key, JSON.stringify(user))

保存数据：

// 解构数据

const = data;

// 保存数据

saveUser(key, )

读取数据：

const [data, setData] = useState(loadUser(key))

App.js完整代码：

import from "react";

// 本地加载和保存数据

const loadUser = key => key && JSON.parse(localStorage.getItem(key))

const saveUser = (key, user) => localStorage.setItem(key, JSON.stringify(user))

function GithubUser() {

// 本地存储的key

const key = `user:$`

// 数据，从本地加载

const [data, setData] = useState(loadUser(key))

// 保存数据

useEffect(() => {

if (!data) return;

if (data && data.username === username) return;

// 解构数据

const = data;

// 保存数据

saveUser(key, )

}, [data, key, username])

// 请求数据

useEffect(() => {

if (!username) return;

if (data && data.username === username) return;

// 请求

fetch(`https://api.github.com/users/$`)

.then(response => response.json())

.then(setData)

.catch(console.error)

}, [username, key, data])

if (data) {

return

}

return 暂无数据

}

export default function App() {

return (

)

}

错误信息和加载状态

App.js完整代码：

import from "react";

function GithubUser() {

const [data, setData] = useState() // 请求数据

const [error, setError] = useState(); // 错误信息

const [loading, setLoading] = useState(false); // 加载状态

// 请求数据

useEffect(() => {

if (!username) return;

setLoading(true); // 加载状态

// 请求

fetch(`https://api.github.com/users/$`)

.then(data => data.json())

.then(setData)

.then(() => setLoading(false))

.catch(setError)

}, [username])

// 加载中

if (loading) return 加载中...

// 错误信息

if (error) return

// 空数据

if (!data) return 暂无数据

// 正常信息

return (

src=

alt=

style={}

/>

}

}

)

}

export default function App() {

return (

)

}

封装useFetch钩子

目标

fetch的使用方法大多数情况下是类似的，都是解析数据，处理加载中状态，处理错误信息。所以，可以封装一个useFetch钩子，简化代码。

核心代码

function useFetch(uri) {

const [data, setData] = useState() // 请求数据

const [error, setError] = useState(); // 错误信息

const [loading, setLoading] = useState(false); // 加载状态

useEffect(() => {

if (!uri) return;

setLoading(true); // 加载状态

// 请求数据

fetch(uri)

.then(data => data.json())

.then(setData)

.then(() => setLoading(false))

.catch(setError)

}, [uri])

return {

loading,

data,

error,

}

}

// 使用

const uri = `https://api.github.com/users/$`

const = useFetch(uri)

完整代码

App.js

import from "react";

function useFetch(uri) {

const [data, setData] = useState() // 请求数据

const [error, setError] = useState(); // 错误信息

const [loading, setLoading] = useState(false); // 加载状态

useEffect(() => {

if (!uri) return;

setLoading(true); // 加载状态

// 请求数据

fetch(uri)

.then(data => data.json())

.then(setData)

.then(() => setLoading(false))

.catch(setError)

}, [uri])

return {

loading,

data,

error,

}

}

function GithubUser() {

const = useFetch(`https://api.github.com/users/$`)

// 加载中

if (loading) return 加载中...

// 错误信息

if (error) return

// 空数据

if (!data) return 暂无数据

// 正常信息

return (

src=

alt=

style={}

/>

}

}

)

}

export default function App() {

return (

)

}

总结