3.5 KiB
3.5 KiB
nav | group | ||||
---|---|---|---|---|---|
|
|
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 的实际场景用例参见: