#react 之ant design Pro 学习研究#----后台交互

2019独角兽企业重金招聘Python工程师标准>>>

#后台请求json 格式 / FormData 格式

import fetch from 'dva/fetch';
import fetchJsonp from 'fetch-jsonp';
import { notification } from 'antd';
import { routerRedux } from 'dva/router';
import store from '../index';

const codeMessage = {
  200: '服务器成功返回请求的数据。',
  201: '新建或修改数据成功。',
  202: '一个请求已经进入后台排队（异步任务）。',
  204: '删除数据成功。',
  400: '发出的请求有错误，服务器没有进行新建或修改数据的操作。',
  401: '用户没有权限（令牌、用户名、密码错误）。',
  403: '用户得到授权，但是访问是被禁止的。',
  404: '发出的请求针对的是不存在的记录，服务器没有进行操作。',
  406: '请求的格式不可得。',
  410: '请求的资源被永久删除，且不会再得到的。',
  422: '当创建一个对象时，发生一个验证错误。',
  500: '服务器发生错误，请检查服务器。',
  502: '网关错误。',
  503: '服务不可用，服务器暂时过载或维护。',
  504: '网关超时。',
};
function checkStatus(response) {
  if (response.status >= 200 && response.status < 300) {
    return response;
  }
  const errortext = codeMessage[response.status] || response.statusText;
  notification.error({
    message: `请求错误 ${response.status}: ${response.url}`,
    description: errortext,
  });
  const error = new Error(errortext);
  error.name = response.status;
  error.response = response;
  throw error;
}

/**
 * Requests a URL, returning a promise.
 *
 * @param  {string} url       The URL we want to request
 * @param  {object} [options] The options we want to pass to "fetch"
 * @return {object}           An object containing either "data" or "err"
 */
export default function request(url, options) {
    const defaultOptions = {
      credentials: 'include',
    };

  const newOptions = { ...defaultOptions, ...options };
    if (newOptions.method === 'POST' || newOptions.method === 'PUT') {
      if (!(newOptions.body instanceof FormData)) {
        newOptions.headers = {
          Accept: 'application/json',
          'Content-Type': 'application/json; charset=utf-8',
          ...newOptions.headers,
        };
        newOptions.body = JSON.stringify(newOptions.body);
      } else {
        // newOptions.body is FormData
        // newOptions.headers = {
        //   "Content-Type": "multipart/form-data",
        //  // ...newOptions.headers,
        // };
        //newOptions = {...options}
        //newOptions.headers = {"Content-Type": "multipart/form-data"}
        return requestcore(url,options);

      }
    }


  return fetch(url, newOptions)
    .then(checkStatus)
    .then(response => {
      if (newOptions.method === 'DELETE' || response.status === 204) {
        return response.text();
      }
      return response.json();
    })
    .catch(e => {
      const { dispatch } = store;
      const status = e.name;
      if (status === 401) {
        dispatch({
          type: 'login/logout',
        });
        return;
      }
      if (status === 403) {
        dispatch(routerRedux.push('/exception/403'));
        return;
      }
      if (status <= 504 && status >= 500) {
        dispatch(routerRedux.push('/exception/500'));
        return;
      }
      if (status >= 404 && status < 422) {
        dispatch(routerRedux.push('/exception/404'));
      }
    });
}

 function requestcore(url, options) {

  const newOptions = {  ...options };
  if (newOptions.method === 'POST' || newOptions.method === 'PUT') {

      // newOptions.body is FormData
      // newOptions.headers = {
      //   "Content-Type": "multipart/form-data",
      //  // ...newOptions.headers,
      // };
     // newOptions.headers = {"Content-Type": "multipart/form-data"}

    }
  return fetch(url, newOptions)
    .then(checkStatus)
    .then(response => {
      if (newOptions.method === 'DELETE' || response.status === 204) {
        return response.text();
      }
      return response.json();
    })
    .catch(e => {
      const { dispatch } = store;
      const status = e.name;
      if (status === 401) {
        dispatch({
          type: 'login/logout',
        });
        return;
      }
      if (status === 403) {
        dispatch(routerRedux.push('/exception/403'));
        return;
      }
      if (status <= 504 && status >= 500) {
        dispatch(routerRedux.push('/exception/500'));
        return;
      }
      if (status >= 404 && status < 422) {
        dispatch(routerRedux.push('/exception/404'));
      }
    });
}

request 处理所有请求

#后端

public ServiceResponse login(@RequestBody UserInfo info)

#附件采用FormData 包装参数，调用requestcore

 const formData = new FormData()
           formData.append('file', values.template.file, values.template.file.name);
           formData.append('billTypeId',values.billType);
           formData.append('name',values.name);
           formData.append('number',values.number);
           formData.append('remark',values.remark);
          dispatch({
            type: 'billTable/add',
            payload: formData,
            callback: (res) => {
              if(res.meta.status !== '000000' ) {
                message.error("添加业务用表失败，请稍后再试！"+res.data.alert_msg)
              }else{
                //
                message.success('添加成功');
                form.resetFields();
                handleModalVisible(false);

                dispatch({
                  type: 'billTable/fetch',
                  payload: {
                    page: 1,
                    pageSize: 10,
                  }
                });
              }
            },
          });

不用增加headers 参数，不然后台会报错

#后端

public ServiceResponse addBillTable(BillTableInfo paramObj, HttpServletRequest req, MultipartFile file)

不用增加@RequestBody 注解

转载于:https://my.oschina.net/u/3277181/blog/3059652