网络请求
一. 简介
对于中后台应用来说,很大一部分工作就在于请求后端的 CRUD 的接口,为进一步降低用户对请求层的感知,我们移除了默认生成的utils/request.ts文件,改成通过配置化的方式暴露给开发者做请求的配置和增强处理;同时通过业务总结出一套标准的接口结构规范,并提供统一的接口解析、错误处理的能力;后续将持续完善可配置项、提供垂直场景如列表、登录失效等解决方案。
二. 使用
1. 使用 request
通过 import { request } from ‘umi’; 你可以使用内置的请求方法。
request 接收两个参数,第一个参数是 url,第二个参数是请求的 options。options 具体格式参考 umi-request。request 的大部分用法等同于 umi-request,一个不同的是 options 扩展了一个配置 skipErrorHandler,该配置为 true 是会跳过默认的错误处理,用于项目中部分特殊的接口。
示例代码如下:
request('/api/user', {
params: {
name: 1,
},
skipErrorHandler: true,
});
2. 使用 useRequest
useRequest 是最佳实践中内置的一个 Hook,通过它你可以获得强大的请求接口的能力,不管是翻页还是加载更多还是和 antd 的Table 容易许多。
一个最简单的示例如下
import { useRequest } from 'umi';
export default () => {
const { data, error, loading } = useRequest(() => {
return services.getUserList('/api/test');
});
if (loading) {
return <div>loading...</div>;
}
if (error) {
return <div>{error.message}</div>;
}
return <div>{data.name}</div>;
};
其中 useRequest 的第一个参数接收一个 function,该 function 需要返回一个 Promise,如果你接入了
OneAPI 那么 OneAPI 自动生成的 services 就是一个个这样的 function。
三. 实战
本次实战使用request作为网络请求,只演示简单使用,更多的配置及使用详情参考And Design Pro --网络请求
1. 配置
在config文件夹下的config.ts中进行配置,Ant Desian Pro模板工程默认已经引入
export default defineConfig({
/**
* @name 网络请求配置
* @description 它基于 axios 和 ahooks 的 useRequest 提供了一套统一的网络请求和错误处理方案。
* @doc https://umijs.org/docs/max/request
*/
request: {},
});
这里只展示request配置,其他配置省缺
2.编写请求方法
在src->service目录下床架xxx.ts,并且通过
import { request } from ‘@umijs/max’;引入
1.请求方法
// @ts-ignore
/* eslint-disable */
import { request } from '@umijs/max';
export async function getAlarmEventList(options?: { [key: string]: any }) {
return request('/api/alarm/eventList', {
method: 'POST',
...(options || {}),
});
}
2.有参请求
方式一:
export async function getAlarmList(options?: { [key: string]: any }) {
return request<API.AlarmList>(' /api/alarm/list', {
method: 'POST',
params:{
'id':'125',
'tital':'test',
},
...(options || {}),
});
}
方式一:
// @ts-ignore
/* eslint-disable */
import { request } from '@umijs/max';
/** 提交接口test POST /api/test/proForm*/
export async function protableTest(body: API.ProTableParams,options?: { [key: string]: any }) {
return request<API.ProTableParams>('/api/test/proTable', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
data: body,
...(options || {}),
});
}
参数/属性详解:
- protableTest:自定义方法名
- body: 方法请求体参数
declare namespace API {
type ProFormParams = {
name?: string;
status?: string;
contract?: string;
};
这一部分写在services->sny-design-pro下的typings.d.ts文件下
- request<API.ProTableParams>
这里面的API.ProTableParams是方法返回的response,可根据需要自定义
- method: 请求方式 POST/GET
其他的几种使用方式
3.页面中使用
- 在页面中引入方法
import { proFormTest } from ‘@/services/ant-design-pro/api’;
- 自定义方法
const handleClick = async (props: any) => {
console.log("获取前端参数")
console.log(props)
const respone = await proFormTest(props)
console.log(respone)
}
- 组件中使用
<ProForm<{
name: string;
password?: string;
status?: string;
}>
{...formItemLayout}
layout={formLayoutType}
submitter={{
render: (props, doms) => {
return formLayoutType === LAYOUT_TYPE_HORIZONTAL ? (
<Row>
<Col span={14} offset={4}>
<Space>{doms}</Space>
</Col>
</Row>
) : (
doms
);
},
}}
onFinish={async (values) => {
await waitTime(2000);
console.log(values);
handleClick(values);
message.success('提交成功');
}}
>
<ProFormRadio.Group
style={{
margin: 16,
}}
/>
<ProFormText width="md" name="name" label="姓名" placeholder="请输入姓名" />
<ProFormText
name='password'
width="md"
label="密码"
placeholder="请输入密码"
/>
<ProFormSelect
name="status"
label="状态"
width="md"
valueEnum={valueEnum}
placeholder="Please select a country"
/>
</ProForm>