• utils/request.js

     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
    
    /** Request 网络请求工具 更详细的 api 文档: https://github.com/umijs/umi-request */
    import { extend } from 'umi-request';
    import { notification } from 'antd';
    
    const codeMessage = {
      200: '服务器成功返回请求的数据。',
      201: '新建或修改数据成功。',
      202: '一个请求已经进入后台排队(异步任务)。',
      204: '删除数据成功。',
      400: '发出的请求有错误,服务器没有进行新建或修改数据的操作。',
      401: '用户没有权限(令牌、用户名、密码错误)。',
      403: '用户得到授权,但是访问是被禁止的。',
      404: '发出的请求针对的是不存在的记录,服务器没有进行操作。',
      406: '请求的格式不可得。',
      410: '请求的资源被永久删除,且不会再得到的。',
      422: '当创建一个对象时,发生一个验证错误。',
      500: '服务器发生错误,请检查服务器。',
      502: '网关错误。',
      503: '服务不可用,服务器暂时过载或维护。',
      504: '网关超时。',
    };
    /** 异常处理程序 */
    
    const errorHandler = (error) => {
      const { response } = error;
    
      if (response && response.status) {
        const errorText = codeMessage[response.status] || response.statusText;
        const { status, url } = response;
        notification.error({
          message: `请求错误 ${status}: ${url}`,
          description: errorText,
        });
      } else if (!response) {
        notification.error({
          description: '您的网络发生异常,无法连接服务器',
          message: '网络异常',
        });
      }
    
      return response;
    };
    /** 配置request请求时的默认参数 */
    
    const request = extend({
      prefix:'/api',
      errorHandler,
      // 默认错误处理
      credentials: 'include', // 默认请求是否带上cookie
    });
    export default request;
    
  • config/proxy.js

     1
     2
     3
     4
     5
     6
     7
     8
     9
    10
    
    export default {
      dev: {
        '/api': {
          target: 'http://192.168.95.29:18888', // baseURL
          changeOrigin: true,
          pathRewrite: {
            '^/api': '',
          },
        },
      },
    
  • 简单使用

     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
    
    request
        .get('/equip/get-all/')
        .then(response => {
        	setDataSource(response.content)
        	console.log(response.content)
        })
        .catch(error => {
        	console.log(error)
        })	
    
    request
        .put('/equip/change/', {
        data: saveData,
    })
        .then(response => {
        console.log(response)
    })
        .catch(error => {
        console.log(error)
    })
    
    request
        .delete(`/equip/delete/${key}`)
        .then(function (response) {
        console.log(response)
    })
        .catch(function (error) {
        console.log(error)
    })