时间戳

首页 > 解决方案 > 是否有管理 isLoading 状态的最佳实践？

javascript - 是否有管理 isLoading 状态的最佳实践？

问题描述

我很抱歉我的英语水平提前。

假设我想从服务器获取数据并在页面加载时呈现它......逻辑是这样的：

  1. 页面正在加载并显示 Preloader（此时我发送获取请求）。
  2. 获取数据并将其发送到 State。
  3. 预加载器消失，状态数据呈现在页面上。

我的初始状态如下所示：

const state = {
        data: [],
        isLoading: false
      }

我正在做以下事情（代码是关于逻辑的）：

  function fetchData() {
    try {
      fetch(URL)
      dispatch({...state, isLoading: true})

          setTimeout(() => {
            dispatch({...state, data: data.payload, isLoading: false})
          }, 500);
        } catch (err) {
          dispatch({...state, isLoading: false})
        }
      }

这是正确的逻辑吗？我不确定这是否是最佳做法....也许我应该这样做：

  function fetchData() {
    try {
      fetch(URL)
      dispatch({...state, isLoading: true})

      setTimeout(() => {
        dispatch({...state, data: data.payload})
      }, 500);
    } catch (err) {
      dispatch({...state, isLoading: false})
    } finnaly {
      dispatch({...state, isLoading: false})
    }

}

那么改变 isLoading 状态的最佳方法是什么？

我正在考虑的第三个选项是创建一个单独的状态 isLoading...我的意思是我必须声明：

  const state = {
    data: [],
  }

  const isLoadingState = {
    isLoading: false,
  }

标签： javascriptreactjs

解决方案

在 finally 块中更新加载指示器会很好：

  function fetchData() {
    try {
      dispatch({...state, isLoading: true})
      fetch(URL)
      dispatch({...state})

      setTimeout(() => {
        dispatch({...state, data: data.payload})
      }, 500);
    } finnaly {
      dispatch({...state, isLoading: false})
    }

当您的请求完成时，它总是会最终阻塞，因此您无需在成功或捕获块中重复设置它。

推荐阅读