umi+react+dva 配置request的全局配置(请求拦截与响应拦截)和调用请求

umi3+react+dva 配置request的全局配置(请求拦截与响应拦截)和调用请求

配置request的全局配置(请求拦截与响应拦截)

app.js

// 运行时 配置

// 异步请求相关 运行时配置
 export const request = {
  timeout: 1000 * 10, // 10s超时
  // 请求拦截
  requestInterceptors:[
    (url,options) => {
      console.log('请求拦截',url,"options",options);
      return options
    }
  ],
  // 响应拦截
  responseInterceptors:[
    (response,options) => {
      console.log('响应拦截',response,"options",options);
      return response
    }
  ]
 }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

使用useRequest或者普通方法 调用请求

about.jsx

import React, { useState, useEffect } from 'react';
import { Space, Table, Button ,message} from 'antd';
import { getStyList, delStyList } from '@/api/about.js';
import { useRequest } from "umi"
export default function About_1(props) {
  const columns = [
    {
      title: '姓名',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '日期',
      dataIndex: 'date',
      key: 'date',
    },
    {
      title: '分数',
      dataIndex: 'score',
      key: 'score',
    },
    {
      title: '住址',
      dataIndex: 'city',
      key: 'city',
    },
    {
      title: 'Action',
      dataIndex: '',
      key: 'action',
      render: (text, record) => (
        <Space size="middle">
          <Button type="primary" size="small" onClick={() => edit(record)}>
            编辑
          </Button>
          <Button
            type="primary"
            danger
            size="small"
            onClick={() => del(record)}
          >
            删除
          </Button>
        </Space>
      ),
    },
  ];
//   const [data, setData] = useState([]);
//   const [loading, setLoading] = useState(true);
  useEffect(() => {
    // init(); // 初始化数据 方法1
  }, []);
  const init = async () => {
    setLoading(true)
    const res = await getStyList();
    console.log('res', res);
    setLoading(false)
    if (res.code == 200) {
      setData(res.data);
    } else {
      message.warning(res.msg);
    }
  };

  // 初始化数据 方法2 data数据响应，loading状态，error错误信息,getStyListReq 重新加载数据
  let { data = [], loading, error,run: getStyListReq } = useRequest(async () => {
    let res = await getStyList()
    console.log('res',res);
    return {
        data: res.data ? res.data : []
    }
  })
  console.log('data, loading, error',data, loading, error,getStyListReq);

  // 指定table的key值为id
  const rowKeyFn = (row) => row.id;
  // 编辑
  const edit = (row) => {
    console.log('edit', row);
  };
  // 删除
  const del = async (row) => {
    // console.log('del', row);
    const res = await delStyList(row.id);
    // console.log('res',res);
    if ( res.code ) {
        message.success("删除成功");
        // init()
        getStyListReq();
    } else {
        message.warning(res.msg);
    }
  };

  return (
    <div className="content">
      <Table
        dataSource={data}
        columns={columns}
        rowKey={rowKeyFn}
        size="middle"
        loading={loading}
      />
    </div>
  );
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107