nocobase/packages/core/client/src/api-client/index.md

nav, group

nav	group
path /client	path /client

APIClient

APIClient

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

示例

import axios from 'axios';

// 不传参时，内部直接创建 axios 实例
const apiClient = new APIClient();

// 提供 AxiosRequestConfig 配置参数
const apiClient = new APIClient({
  baseURL: '',
});

// 提供 AxiosInstance
const instance = axios.create({
  baseURL: '',
});
const apiClient = new APIClient(instance);

// 常规请求
const response = await apiClient.request({ url });

// NocoBase 特有的资源操作
const response = await apiClient.resource('posts').list();

// 请求共享
const { data, loading, run } = apiClient.service('uid');

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

APIClientProvider

提供 APIClient 实例的上下文。

const apiClient = new APIClient();

<APIClientProvider apiClient={apiClient}></APIClientProvider>

useAPIClient

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

const apiClient = useAPIClient();

useRequest

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

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

const { data, loading, refresh, run, params } = useRequest({ url: '/users' });

// useRequest 里传的是 AxiosRequestConfig，所以 run 里传的也是 AxiosRequestConfig
run({
  params: {
    pageSize: 20,
  }
});

例子如下：

或者是 NocoBase 的 resource & action 请求：

const { data, run } = useRequest({
  resource: 'users',
  action: 'list',
  params: {
    pageSize: 20,
  },
});

// useRequest 传的是 ResourceActionOptions，所以 run 直接传 action params 就可以了。
run({
  pageSize: 50,
});

例子如下：

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

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

run(...params);

更多用法查看 ahooks 的 useRequest()

useResource

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

资源是 NocoBase 的核心概念，包括：

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

资源 URI

# 独立资源，文章
/api/posts
# 关系资源，文章 ID=1 的评论
/api/posts/1/comments

通过 APIClient 获取资源

const api = new APIClient();

api.resource('posts');
api.resource('posts.comments', 1);

useResource 用法：

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

resource 的实际场景用例参见：

• useCollection()
• useCollectionField()