umi前后端交互技术，通用型request配置

　　在umi框架下进行开发，与后台交互可以使用自定义请求util，直接对fetch进行底层封装，自主性强。也可以使用框架提供的request配置，更全面的进行开发。

使用自定义Util方式：requestUtils.jsx

//Author:guanghe
import {fetch} from 'dva';
import {Modal} from 'antd';

const assyParams = (obj) => {
  let str = ''
  for (let key in obj) {
    const value = typeof obj[key] !== 'string' ? JSON.stringify(obj[key]) : obj[key]
    str += '&' + key + '=' + value
  }
  return str.substr(1)
}

export function checkStatus(response) {
  if (response.status >= 200 && response.status < 300) {
    return response;
  }
  let err = new Error(response.statusText);
  err.content = <>
    <div>{response.status} {response.statusText}</div>
    <div>{response.url}</div>
  </>;
  throw err;
}

export function checkResult(res, tip = false) {
  if (res.code == 0) {
    if(tip) {
      Modal.success({
        title: "请求成功！",
        content: <>{res.msg}</>
      });
    }
    return res.data;
  }
  let err = new Error(res.msg);
  err.content = <>
    {res.msg}
  </>;
  throw err;
}

//自己封装的request，但推荐使用@@/plugin-request/request
export default function request(requestData, tip = false) {
  let {url, method} = requestData;
  let options = {
    method,
    headers: {
      'Content-Type': 'application/json; charset=utf-8',
    },
    credentials: 'include' //是否携带cookie，默认为omit不携带; same-origi同源携带; include同源跨域都携带
  };
  if (method.toLowerCase() === 'get') {
    url = requestData.url + '?' + assyParams(requestData.data);
  }
  if (method.toLowerCase() === 'post') {
    options.body = JSON.stringify(requestData.data);
  }
  return fetch(url, options)
    .then(checkStatus)
    .then(response => response.json())
    .then((res) => checkResult(res, tip))
    .catch((err) => {
      Modal.error({
        title: "请求异常！",
        content: err.content
      });
    });
}

使用umi框架提供的request方式：app.ts

//Author:guanghe
import { RequestConfig } from 'umi';
import {Modal} from 'antd';

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

interface error {
  name:string,
  data:any,
  type: string,
  response:{
    status:number,
    statusText:string,
    url:string
  }
}

const errorHandler = (error:error) => {
  //适配errorConfig中自定义的error
  if(error.name==="BizError"){
    Modal.error({
      title: `请求错误 ${error.data.code}`,
      content: error.data.msg,
    });
    throw new Error(error.data.msg);
  }
  //适配网络error，即error.name == "ResponseError"
  const { response } = error;
  const { status, url } = response;
  let title = `请求错误 ${status}: ${url}`;
  const content = codeMessage[response.status] || response.statusText;
  Modal.error({
    title,
    content,
  });
  throw new Error();
};

export const request: RequestConfig = {
  prefix: '/api/centerbusiness',
  method: "post",
  requestType: "form",
  errorHandler,
  errorConfig: {
    adaptor: res => {
      return {
        //success为false，则umi抛出error.name为BizError的异常
        success: res.code == 0,
      };
    },
  },
};