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

目录

• [umi+react+dva 配置request的全局配置(请求拦截与响应拦截)和调用请求](#umi+react+dva 配置request的全局配置(请求拦截与响应拦截)和调用请求)
• • 配置request的全局配置(请求拦截与响应拦截)
  • • app.js
  • [使用useRequest或者普通方法 调用请求](#使用useRequest或者普通方法 调用请求)
  • • about.jsx

umi+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
    }
  ]
 }

使用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>
  );
}