3.8 ahooks处理Ajax请求

一、ahooks处理Ajax请求

1. useRequest是一个强大的一部数据管理的Hooks，React项目中的网络请求场景使用useRequest就够了

2. 初始默认调用

   import { useRequest } from 'ahooks'
   import axios from 'axios'
   
   async function getData() {
     const res = await axios.get('地址')
     return (await res).data.list
   }
   
   function App() {
     // 初始默认调用
     const { data, error, loading } = useRequest(getData)
     if (error) {
       return <div>{error.message}</div>
     }
     if (loading) {
       return <div>loading...</div>
     }
     return (
       <>
         <div>Default Template</div>
         <div>{data}</div>
       </>
     )
   }
   
   export default App
   

3. 手动触发调用

   import { useRequest } from 'ahooks'
   import axios from 'axios'
   import { useState } from 'react'
   
   async function getData() {
     const res = await axios.get('')
     return (await res).data.list
   }
   
   function App() {
     const [data, setData] = useState([])
     // 定义手动触发调用，成功相应设置值
     const { run, error, loading } = useRequest(getData, {
       manual: true,
       onSuccess(res) {
         setData(res)
       },
     })
     if (error) {
       return <div>{error.message}</div>
     }
     if (loading) {
       return <div>loading...</div>
     }
     return (
       <>
         <div>Default Template</div>
         <button onClick={() => run()}>点击</button>
         <div>{data}</div>
       </>
     )
   }
   
   export default App
   

4. 传参请求

   import { useRequest } from 'ahooks'
   import axios from 'axios'
   import { useState } from 'react'
   
   async function getData(num1, num2) {
     console.log(num1, num2)
     const res = await axios.get('')
     return (await res).data.list
   }
   
   function App() {
     const [data, setData] = useState([])
     const { run, error, loading } = useRequest(getData, {
       manual: true,
       onSuccess(res, params) {
         console.log(params)
         setData(res)
       },
     })
     if (error) {
       return <div>{error.message}</div>
     }
     if (loading) {
       return <div>loading...</div>
     }
     return (
       <>
         <div>Default Template</div>
         <button onClick={() => run(123, 456)}>点击</button>
         <div>{data}</div>
       </>
     )
   }
   
   export default App