前言
学无止境,无止境学。坚持每天学点编程知识,坚持每天写点小文章,坚持每天进步一点点。大家好,我是张大鹏,喜欢学习和分享,希望能够通过此公众号,将自己学到的东西分享给大家,和大家一起交流,一起成长,一起进步。
乾坤未定,你我皆是黑马。大鹏一日同风起,扶摇直上九万里。宝剑锋从磨砺出,梅花香自苦寒来。不积跬步,无以至千里,不积小流无以成江海。
如果有多余的时间,就坚持学习吧,小时候学习改变命运,长大了学习丰富内涵,老了学习带来宁静。活到老,学到老,我能行!
概述
《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 (
)
}
总结
领取专属 10元无门槛券
私享最新 技术干货