自定义Hook axios

最新推荐文章于 2025-08-01 11:43:02 发布

原创最新推荐文章于 2025-08-01 11:43:02 发布 · 319 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #java

该文章展示了如何在React中封装一个自定义Hook`useAxios`，结合`useState`和`useEffect`管理状态，用于发送axios网络请求。当组件使用这个Hook时，它能显示加载状态、数据或错误信息。

封装Hook:

import { useState, useEffect } from 'react'
import axios from 'axios'

//封装axios发送网络请求的自定义Hook
function useAxios(url){
	const [loading, setLoading] = useState(false)
	const [data, setData] = useState()
	const [error, setError] = useState()
	
	useEffect(() => {
		//利用axios发送网络请求
		setLoading(true)
		axios.get(url)//发送一个get请求
			.then(res => setData(res))
			.catch(err => setError(err))
			.finally(() => setLoading(false))
	},[url])
	
	return [loading, data, error]
}

export default useAxios

调用封装Hook：

import React from 'react'
import useAxios from './useAxios.js'

function App(){
	const url = 'http://localhost:3000/abc'
	const [loading, data, error] = useAxios(url)
	
	if(loading) return <div>loading...</div>
	
	return error
		?<div>{JSON.stringify(error)}</div>
		:<div>{JSON.stringify(data)}</div>
}

export default App