/yalla-useRequest

umi model插件使用Demo，封装umi-request和alibaba hooks

Primary LanguageTypeScript

简介

本项目是基于umi-request和alibaba的hooks两个库的封装，使用ABP作为服务端时的应用案例。

使用本项目必须要先了解上述两个库的用途和区别。

Getting Started

Install dependencies,

$ yarn

Start the dev server,

$ yarn start

页面加载时就自动获取数据

请求出错自动弹出错误通知

const { data: users, error, loading } = useRequest<IUser[]>('/api/users',
    {
      manual:false,
      initialData: [],  //初始数据
      enableErrorNotification: true,
    },
  );

自行处理错误信息，不弹出错误通知

const { data: users, error, loading } = useRequest<IUser[]>('/api/users',
    {
      manual:false,
      initialData: [],  //初始数据
      onError: (e: Error) => {
        console.log("用户捕获错误onError: ", e.message);
      },
    },
  );

手动获取数据

manual选项被设置为默认为true手动获取数据，在调用run函数时传入的参数可以自动替换url:id变量。

const getRequest = useRequest<IUser>('/api/users/:id');
const { data, error, loading } = getRequest;
getRequest.run({id:100})   //用于替换url的参数

直接请求数据

不用useRequet的情况，例如删除数据操作就适合直接调用。请求错误会自动显示错误通知。

request.delete(`/api/users/${id}`);

自行处理错误，不显示错误通知的情况。

request.delete({url:`/api/users/${id}`, errorHandler:(error)=>{});