javascript - 使用 React 加载屏幕以改善用户体验

Question

我对加载数据方法有点困惑。所以我想在页面加载时显示加载屏幕，直到加载所有数据，我的方法是为此页面上的每个获取方法设置加载状态。在这里，我使用 redux 和 thunk 来调度 async 操作。

Action 类型:

export const IS_LOADING_SKILLS = "IS_LOADING_SKILLS";
export const SET_SKILLS = "SET_SKILLS";
export const IS_LOADING_INTRO = "IS_LOADING_INTRO";
export const SET_INTRO = "SET_INTRO";

行动:

import { SET_SKILLS, SET_INTRO,IS_LOADING_INTRO,IS_LOADING_SKILLS} from "./actions-type"

export const fetchSkills = () => {
 return (dispatch) => {
    dispatch(isLoadingSkills(true));
    await api.get(url)
        .then(({ data }) => dispatch(setSkills(data)));
    dispatch(isLoadingSkills(false));
   }
}
export const fetchIntro = () => {
 return (dispatch) => {
    dispatch(isLoadingIntro(true));
    await api.get(url)
        .then(({ data }) => dispatch(setIntro(data)));
    dispatch(isLoadingIntro(false));
   }
}

const setSkills = (payload) => {
    return {
        type: SET_SKILLS,
        payload: payload
    }
}
const setIntro = (payload) => {
    return {
        type: SET_INTRO,
        payload: payload
    }
}
const isLoadingSkills = (payload)=>{
return{
type:IS_LOADING_SKILLS,
payload:payload
}
}
    const isLoadingIntro = (payload)=>{
    return{
    type:IS_LOADING_INTRO,
    payload:payload
    }
}

状态:

const InitialState ={
          loading:{
                 loadingIntro:false,
                 loadingSkills:false
                 },
           data:{
                 intro:"",
                 skills:[],
                }
             }

现在，当每个获取数据方法的加载状态都变为 false 时，加载屏幕将会消失。我想知道这是否是一个好方法或者什么更好，请解释一下。谢谢!

Answer 1

这是一个很好的方法，但是您的代码有一些奇怪的部分。使用 async/await 或 .then/.catch 回调(不要忘记 .catch，您可以调度 setErrorMessage 操作等)。

所以，有了 promise ，你会做到:

export const fetchSkills = () => {
  return (dispatch) => {
    dispatch(isLoadingSkills(true));
    api.get(
      .then(({ data }) => {
        dispatch(setSkills(data)));
        dispatch(isLoadingSkills(false));
      })
      .catch((error) => ...stuff)
  }
}
export const fetchIntro = () => {
  return (dispatch) => {
    dispatch(isLoadingIntro(true));
    api.get(url)
      .then(({ data }) => {
        dispatch(setIntro(data)));
        dispatch(isLoadingIntro(false));
      })
      .catch((error) => ...stuff)
  }
}

使用 async/await 你会这样做:

export const fetchSkills = () => {
  return async (dispatch) => {
    try {
      dispatch(isLoadingSkills(true));
      const { data } = await api.get(url)
      dispatch(setSkills(data)));
      dispatch(isLoadingSkills(false));
    } catch(error) {
      ...stuff
    }
  }
}
export const fetchIntro = () => {
  return async (dispatch) => {
    try {
      dispatch(isLoadingIntro(true));
      const { data } = await api.get(url)
      dispatch(setIntro(data)));
      dispatch(isLoadingIntro(false));
    } catch(error) {
      ...stuff
    }
  }
}

请记住，async/await 只是 Promise 的语法糖。您只需使用await 将函数定义为异步(这允许您使用await AND 返回一个promise)，而不是在promise 上使用.then 和.catch，并且您将需要try/catch 来catch执行请求时可能发生的任何错误。