Note·Fetch data with React Hooks

作者 : jamin 本文共3814个字,预计阅读时间需要10分钟 发布时间: 2022-11-22 共1003人阅读

在 Reack Hook 中处理网络请求似乎要比 class 组件麻烦一点,毕竟没有 this 实例对象可以在上面封装方法。不要拘束于之前的思维,Hook 的数据请求也许会有更好的方式。

这次我们的实验目标是通过 Github Api 来获取 issues 文章列表,通过传入不同的页码来实现分页。通过实践来研究一下在 hook 中如何优雅地实现数据请求,并在最后封装一个通用的自定义数据请求 hook,以便在今后的项目中复用。

Data Fetching with React Hooks

我们先实现一个简单的函数组件,该组件渲染一个文章列表,并添加一个翻页按钮,每次点击按钮就向下翻一页并向 Github Api 请求文章列表数据。不要问我为什么没有上一页按钮或者分页溢出了怎么办,不要在意这些细节,我们这里只是实验 hook 网络请求,不考虑这种业务细节。

这个功能很简单,如果稍微熟悉 react hook 的使用的话很快就能实现。我们可以先用 useState 初始化文章列表和初始页码,然后使用 useEffect 获取当前页的文章列表,并在页码更新时重新获取文章列表。第一阶段的代码如下:

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

export default () => {
  const [list, setList] = useState([])
  const [page, setPage] = useState(1)

  useEffect(() => {
    const fetchData = async () => {
      const url = `${GITHUB_API}${page}`
      const response = await fetch(url)
      const data = await response.json()
      setList(data)
    }
    fetchData()
  }, [page])

  const handleNextPage = () => setPage(page + 1)

  return (
    <div>
      <button onClick={handleNextPage}>NextPage</button>
      <ul>
        {list.map(o => (
          <li key={o.id}>{o.title}</li>
        ))}
      </ul>
    </div>
  )
}

需要注意的是使用 useEffect 的时候第一个函数参数不能是一个异步的 async 函数或者是返回一个 Promise,也就是我们不能像下面这样调用,否则会报出警告:

useEffect(async () => {
  const url = `${GITHUB_API}${page}`
  const response = await fetch(url)
  const data = await response.json()
  setList(data)
}, [page])

useEffect function must return a cleanup function or nothing. Promises and useEffect(async () => …) are not supported, but you can call an async function inside an effect.

Add Loading and Error

上面的简易版本已经可以正常工作了,但是有时我们需要在接口请求时处理更多的页面状态。比如将页面置于 loading,并且在网络请求出错时进行错误处理。根据这个需求,我们在第二个版本加入 loading 和 error 处理,并在渲染组件时候根据不同的状态展示不同的内容:

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


export default () => {
  const [list, setList] = useState([])
  const [page, setPage] = useState(1)
  // 添加 loading 和 error 状态
  const [isLoading, setIsLoading] = useState(false)
  const [isError, setIsError] = useState(false)

  useEffect(() => {
    const fetchData = async () => {
      setIsError(false)
      setIsLoading(true)
      try {
        const url = `${GITHUB_API}${page}`
        const response = await fetch(url)
        const data = await response.json()
        setList(data)
      } catch (error) {
        setIsError(true)
      }
      setIsLoading(false)
    }
    fetchData()
  }, [page])

  const handleNextPage = () => setPage(page + 1)

  return (
    <div>
      <button onClick={handleNextPage}>NextPage</button>
      <ul>
        {list.map(o => (
          <li key={o.id}>{o.title}</li>
        ))}
      </ul>

      {/* 不同的状态展示不同的提示内容 */}
      {isError && <div>Something went wrong ...</div>}
      {isLoading && <div>Loading ...</div>}
    </div>
  )
}

Custom Data Fetching Hook

我们第二版本的数据请求方法已经基本可以满足需求,但是实际业务中数据请求并不只限于一个地方存在,所有往往会封装一个通用的数据请求方法以供多处调用。我们通过 useReducer 对请求进行统一封装,实现一个可重复使用的自定义 hook。最终版代码如下:

import React, { useState, useEffect, useReducer } from 'react'


export default () => {
  const [list, setList] = useState([])
  const [page, setPage] = useState(1)

  const { data, doFetch } = useDataApi(`${GITHUB_API}${page}`, [])
  // 翻页时重新获取列表
  useEffect(() => doFetch(`${GITHUB_API}${page}`), [page])
  useEffect(() => setList(data), [data])

  const handleNextPage = () => setPage(page + 1)

  return (
    <div>
      <button onClick={handleNextPage}>NextPage</button>
      <ul>
        {list.map(o => (
          <li key={o.id}>{o.title}</li>
        ))}
      </ul>

      {isError && <div>Something went wrong ...</div>}
      {isLoading && <div>Loading ...</div>}
    </div>
  )
}

const dataFetchReducer = (state, action) => {
  switch (action.type) {
    case 'FETCH_INIT':
      return {
        ...state,
        isLoading: true,
        isError: false
      }
    case 'FETCH_SUCCESS':
      return {
        ...state,
        isLoading: false,
        isError: false,
        data: action.payload
      }
    case 'FETCH_FAILURE':
      return {
        ...state,
        isLoading: false,
        isError: true
      }
    default:
      throw new Error()
  }
}

const useDataApi = (initialUrl, initialData) => {
  const [url, setUrl] = useState(initialUrl)

  const [state, dispatch] = useReducer(dataFetchReducer, {
    isLoading: false,
    isError: false,
    data: initialData
  })

  useEffect(() => {
    let didCancel = false

    const fetchData = async () => {
      dispatch({ type: 'FETCH_INIT' })
      try {
        const response = await fetch(url)
        const data = await response.json()
        if (!didCancel) {
          dispatch({ type: 'FETCH_SUCCESS', payload: data })
        }
      } catch (error) {
        if (!didCancel) {
          dispatch({ type: 'FETCH_FAILURE' })
        }
      }
    }
    fetchData()

    return () => {
      didCancel = true
    }
  }, [url])

  const doFetch = url => {
    setUrl(url)
  }

  return { ...state, doFetch }
}

参考文章:
React-hooks-fetch-data

我的博客即将同步至腾讯云开发者社区,邀请大家一同入驻:https://cloud.tencent.com/developer/support-plan?invite_code=1z8c26eddpi8c

本站所提供的部分资源来自于网络,版权争议与本站无关,版权归原创者所有!仅限用于学习和研究目的,不得将上述内容资源用于商业或者非法用途,否则,一切后果请用户自负。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源。如果上述内容资对您的版权或者利益造成损害,请提供相应的资质证明,我们将于3个工作日内予以删除。本站不保证所提供下载的资源的准确性、安全性和完整性,源码仅供下载学习之用!如用于商业或者非法用途,与本站无关,一切后果请用户自负!本站也不承担用户因使用这些下载资源对自己和他人造成任何形式的损失或伤害。如有侵权、不妥之处,请联系站长以便删除!
金点网络-全网资源,一网打尽 » Note·Fetch data with React Hooks

常见问题FAQ

免费下载或者VIP会员专享资源能否直接商用?
本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。
是否提供免费更新服务?
持续更新,永久免费
是否经过安全检测?
安全无毒,放心食用

提供最优质的资源集合

立即加入 友好社区
×