自定义Hook axios

最新推荐文章于 2024-01-22 15:56:49 发布

Seven_Ting

最新推荐文章于 2024-01-22 15:56:49 发布

阅读量231

点赞数

文章标签： javascript 前端 java

本文链接：https://blog.csdn.net/Seven_Ting/article/details/130212547

版权

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

摘要由CSDN通过智能技术生成

封装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