umi学习总结（一）定义初始化数据和请求

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第4天，点击查看活动详情。

初步了解了umi，总结了两个api: useParams和history, 两个plugin：@umijs/plugin-initial-stateuse 和 @umijs/plugin-request，以下是具体内容：

API

useParams

用于获取路由中的参数params, 对应的是动态路由中的键值对，列如/authority/:type,

import { useParams } from 'umi';

export default () => {
  const params = useParams();
  return (
    <div>params: {JSON.stringify(params)}</li></div>
  );
};

history

可以获取路由的信息，用于跳转等功能

import { history } from 'umi';

history.push('/list');

Plugins

@umijs/plugin-initial-stateuse + useModel

初始化一些数据

• 1、在app.tsx中写getInitialState

export async function getInitialState(): Promise<{
  data?: any;
  currentUser?: Partial<API.CurrentUser>;
  clearUser: () => any;
}> {
  // 如果是登录页面，不执行
  if (history.location.pathname !== loginPath) {
    let currentUser: Partial<API.CurrentUser> = {};
    const cacheUser = sessionStorage.getItem(`${CACHE_PREFIX}_userinfo`);
    const data = await fetchXXX();
    return {
      data ,
      settings: {},
      clearUser: () => {
        sessionStorage.removeItem(`${CACHE_PREFIX}_userinfo`);
      },
    };
  }
  return {
    data: {},
    settings: {},
    clearUser: () => {},
  };
}

• 2、配合useModel获取初始值：

import { useModel } from 'umi';
const { initialState, loading, error, refresh, setInitialState } = useModel('@@initialState');

initialState.clearUser()
refresh()

1. initialState: 运行时配置中，getInitialState 的返回值。
2. loading: getInitialState 是否处于 loading 状态，在首次获取到初始状态前，页面其他部分的渲染都会被阻止。
3. loading 可用于判断 refresh 是否在进行中。 error: 当运行时配置中，getInitialState throw Error 时，会将错误储存在 error 中。
4. refresh: 重新执行 getInitialState 方法，并获取新数据。
5. setInitialState: 手动设置 initialState 的值，手动设置完毕会将 loading 置为 false.

• 3、官方文档链接

@umijs/plugin-request + useRequest

用于请求接口

const { data, error, loading } = useRequest(service);

1、useRequest 会默认执行，如果不想默认执行，想手动触发，可以通过设置manual为 true,

const { run } = useRequest(service, {
  manual: true
});

2、可以通过调用run来手动触发请求

const queryF = useRequest(service, {
  manual: true
});
queryF.run(）

3、提供了refresh方法来刷新，重新请求接口

  const { run, refresh } = useRequest((id: number) => getUsername(id), {
    manual: true,
  });
  
  可以直接调用refresh代替run()

4、options的一些生命周期，如下：

  const { run, refresh } = useRequest((id: number) => getUsername(id), {
    manual: true,
    onBefore?: (params: TParams) => void,  // 请求成功之前
    onSuccess?: (data: TData, params: TParams) => void,  // 请求成功
    onError?: (e: Error, params: TParams) => void,  // 请求失败
    onFinally?: (params: TParams, data?: TData, e?: Error) => void,  // 请求完成
  });