数据请求

大多数前端应用都需要通过 HTTP 协议与后端服务器通讯。框架内置提供了请求功能，基于社区主流的 axios 进行封装，提供了 request 和 useRequest Hooks 方法。

request

request 基于 axios 进行封装，在使用上与 axios 保持一致，使用方式如下：

  1. import { request } from 'ice'
  3. async function getList() {
  4.   try {
  5.     const data = await request({
  6.       url: '/api/list'
  7.     });
  8.     console.log(data);
  9.   } catch (error) {
  10.     console.error(error);
  11. }

useRequest

useRequest 基于 React Hooks 进行封装，因此需要确保 React 版本在 v16.8.0 以上，在组件中使用 useRequest 请求数据并渲染：

  1. import { useRequest } from 'ice';
  3. function ListView(props) {
  4.   const { data, loading, error, request } = useRequest({
  5.     url: '/api/list',
  6.     method: 'GET',
  7.   });
  8.   const dataSource = data ? data.dataSource : [];
  10.   useEffect(() => {
  11.     request();
  12.   }, []);
  14.   return (
  15.     <>
  16.       {error && <div>{error.message}</div>}
  17.       {loading ? (
  18.         <div>loading....</div>
  19.       ) : (
  20.         dataSource.map(item => {
  21.           return <div>{item.name}</div>;
  22.         })
  23.       )}
  24.     </>
  25.   );
  26. }

请求配置

在实际项目中通常需要对请求进行全局统一的封装，例如配置请求的 baseURL，拦截请求和响应、取消请求等等，这时只需要在应用的的 appConfig 中进行配置即可。

  1. import { createApp } from 'ice';
  3. const appConfig = {
  4.   request: {
  5.     // ref: https://github.com/axios/axios#request-config
  6.     baseURL: '/api',
  7.     // ref: https://github.com/axios/axios#interceptors
  8.     interceptors: {
  9.       request: {
  10.         onConfig: (config) => {},
  11.         onError: (error) => {}
  12.       },
  13.       response: {
  14.         onConfig: (config) => {},
  15.         onError: (error) => {}
  16.       },
  17.     }
  18.   }
  19. };
  21. createApp(appConfig);

更多使用详见：axios