自定义Hook axios

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