由于项目功能需求采用Antd Pro官方脚手架，为了保持框架完整性不再添加其他数据请求类npm包，所以对项目中@utils/request.js提供的官方文档进行封装。
官方API：https://github.com/umijs/umi-request 或者 https://www.npmjs.com/package/umi-request
二者文档说明差别不大。

补充：主要针对umi-request进行“请求（request）加拦截”和“回调（response）拦截”，
再根据回调拦截器返回的内容进行下一步操作。

话不多说 直接上代码

// An highlighted block
/**
 * 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,
    });
  }

  return response;
};
const request = extend({
  errorHandler,
  // 默认错误处理
  credentials: 'include', // 默认请求是否带上cookie

});

// request拦截器, 改变url 或 options.
request.interceptors.request.use(async (url, options) => {

  let c_token = localStorage.getItem("x-auth-token");
  if (c_token) {
    const headers = {
      'Content-Type': 'application/json',
      'Accept': 'application/json',
      'x-auth-token': c_token
    };
    return (
      {
        url: url,
        options: { ...options, headers: headers },
      }
    );
  } else {
    const headers = {
      'Content-Type': 'application/json',
      'Accept': 'application/json',
      'x-auth-token': c_token
    };
    return (
      {
        url: url,
        options: { ...options },
      }
    );
  }

})

// response拦截器, 处理response
request.interceptors.response.use((response, options) => {
  let token = response.headers.get("x-auth-token");
  if (token) {
    localStorage.setItem("x-auth-token", token);
  }
  return response;
});


export default request;

官方提供两种方式：
1.request => response 链条 （请求拦截=>回调拦截）
2.use next
但是在个人调试代码中使用第二种方法会报错

use is not function

随即便采用第一种方法，具体使用情况为：
1.请求前获取本地令牌（c_token），有则加入头部，无则想服务端请求；
2.服务器根据请求是否有令牌进行比对和颁发；
3.本地获取回调直接存入LocalStorage。

每次都访问一遍浏览器缓存

只有登录成功服务端传回数据并携带头部，我们将x-auth-token存入浏览器LocalStorage。

同样是为了保证项目的完整性，不引入新的npm包 eg: cookie，所以我们采用浏览器缓存机制存储临时数据，采用LocalStorage缓存路由，可以为用户提供加载重定向的功能。

记录登录状态后，业务页面需要数据交互在对应service.js层的请求都会默认带上头部头部信息。 service.js例子

import request from '@/utils/request';

// 测试登录
export async function Login(params) {
	// params 来自于effects中参数

 	// 对应rest接口，/server/api/用的是config.js中proxy代理。详细配置在config.js中配置。
    return request('/server/api/web/rest/UserRest/login', { 
   		 // 请求方式
        method: 'POST',
     	// 用data包裹参数是官方指定写法，如果data有参数umi-request会默认读取data里面参数。
        data: {
            cmd: 'login',
            type: 'request',
            request: {
                username: 'admin',
                password: 'admin'
            }
        }
    })
}