Request

APIClient

1class APIClient {
2  // axios 实例
3  axios: AxiosInstance;
4  // 缓存带 uid 的 useRequest({}, {uid}) 的结果,可供其他组件调用
5  services: Record<string, Result<any, any>>;
6  // 构造器
7  constructor(instance?: AxiosInstance | AxiosRequestConfig);
8  // 客户端请求,支持 AxiosRequestConfig 和 ResourceActionOptions
9  request<T = any, R = AxiosResponse<T>, D = any>(config: AxiosRequestConfig<D> | ResourceActionOptions): Promise<R>;
10  // 获取资源
11  resource<R = IResource>(name: string, of?: any): R;
12}

示例

1import axios from 'axios';
2
3// 不传参时,内部直接创建 axios 实例
4const apiClient = new APIClient();
5
6// 提供 AxiosRequestConfig 配置参数
7const apiClient = new APIClient({
8  baseURL: '',
9});
10
11// 提供 AxiosInstance
12const instance = axios.create({
13  baseURL: '',
14});
15const apiClient = new APIClient(instance);
16
17// 常规请求
18const response = await apiClient.request({ url });
19
20// Tachybase 特有的资源操作
21const response = await apiClient.resource('posts').list();
22
23// 请求共享
24const { data, loading, run } = apiClient.service('uid');

api.service(uid) 的例子,ComponentB 里刷新 ComponentA 的请求数据

APIClientProvider

提供 APIClient 实例的上下文。

1const apiClient = new APIClient();
2
3<APIClientProvider apiClient={apiClient}></APIClientProvider>

useAPIClient

获取当前上下文的 APIClient 实例。

1const apiClient = useAPIClient();

useRequest

1function useRequest<P>(
2  service: AxiosRequestConfig<P> | ResourceActionOptions<P> | FunctionService,
3  options?: Options<any, any>,
4);

支持 axios.request(config),config 详情查看 axios

1const { data, loading, refresh, run, params } = useRequest({ url: '/users' });
2
3// useRequest 里传的是 AxiosRequestConfig,所以 run 里传的也是 AxiosRequestConfig
4run({
5  params: {
6    pageSize: 20,
7  }
8});

例子如下:

或者是 Tachybase 的 resource & action 请求:

1const { data, run } = useRequest({
2  resource: 'users',
3  action: 'list',
4  params: {
5    pageSize: 20,
6  },
7});
8
9// useRequest 传的是 ResourceActionOptions,所以 run 直接传 action params 就可以了。
10run({
11  pageSize: 50,
12});

例子如下:

也可以是自定义的异步函数:

1const { data, loading, run, refresh, params } = useRequest((...params) => Promise.resolve({}));
2
3run(...params);

更多用法查看 ahooks 的 useRequest()

useResource

1function useResource(name: string, of?: string | number): IResource;

资源是 Tachybase 的核心概念,包括:

  • 独立资源,如 posts
  • 关系资源,如 posts.tags posts.user posts.comments

资源 URI

1# 独立资源,文章
2/api/posts
3# 关系资源,文章 ID=1 的评论
4/api/posts/1/comments

通过 APIClient 获取资源

1const api = new APIClient();
2
3api.resource('posts');
4api.resource('posts.comments', 1);

useResource 用法:

1const resource = useResource('posts');
2const resource = useResource('posts.comments', 1);