Ant Design Pro(5)-5.网络请求

浪浪山的猿

已于 2022-10-17 15:39:02 修改

阅读量2.6k

点赞数

分类专栏： Ant Design Pro 文章标签： javascript 前端 typescript

于 2022-10-17 15:25:25 首次发布

本文链接：https://blog.csdn.net/qq_44936392/article/details/127362930

版权

Ant Design Pro 专栏收录该内容

9 篇文章 4 订阅

订阅专栏

网络请求

一. 简介

对于中后台应用来说，很大一部分工作就在于请求后端的 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>