umi request 的简单修改

request 封装

design pro 的api访问采用request，在本项目的/src/service/ant-design-pro里面有访问mock模拟api的代码，由于我们的是要做前后端分离的，后端的api和前端不一定放在同一个服务器。而我们前面对菜单的改造是希望我们可以访问本地的json文件，这样我们就需要把这两种访问方式区分开来，并且amis的schema文档内部也有需要访问后端api的时候，为此我们需要简单的封装一下umi 的request。当然后面我们如果有需要，还可以进一步对请求进行拦截。对实例request进行请求拦截（interceptors）。
在src/utils/文件夹里面添加request.ts,代码如下

/* eslint-disable */
import { extend } from 'umi-request';
//api 网址前缀，为了方便日后更换服务器，直接用一个常量定义
const urlPrefix = 'http://localhost:1898';//开发的时候如果都是本地服务器，把这个常量设置为空字符就可以
const remoteRequest = extend({
  // 路径前缀（基础路径）
  prefix: urlPrefix,
  timeout: 5000,
});
/**
 * 读取本地文件
 */
export const localRequest = extend({
  prefix: '',
  timeout: 5000,
});

/*
 * amis的schema文件专用request
 */
export async function amisRequest(url: string, method?: string, options?: { [key: string]: any }) {
  let newMethod = '';
  if (!method) newMethod = 'GET';
  else newMethod = method.toUpperCase();
  switch (newMethod) {
    case 'GET':
      return remoteRequest.get(url, options);
    case 'POST':
      return remoteRequest.post(url, options);
    case 'DELETE':
      return remoteRequest.delete(url, options);
    case 'PUT':
      return remoteRequest.put(url, options);
  }

}
export default remoteRequest;

我们封装了request,项目里面需要访问api的地方都需要改代码，目前有两个地方有Api访问，一个是service里面，一个是amis 的schema里面，这里我们先解决service里面，关于amis访问api见我们下一篇文章设计amis组件。

修改service里面的api.ts

这比较简单，import头改一下，读取本地json的地方改一下。代码分别如下：

//import { request } from 'umi';
import request, { localRequest } from '@/utils/request';

读取本地json的地方，全部改成用localRequest就可以了

/**读取本地Json文档 */
export async function getLocalSchema(fileName: string, ver?: string) {
  return localRequest<Schema>(`/json/${fileName}.json?v=${ver}`, {
    method: 'get',
    headers: {
      'Content-Type': 'application/json',
    },
  });
}
import { MenuDataItem } from '@ant-design/pro-layout';
import { Schema } from 'amis';

/**根据locale的key读取菜单的Json文档 */
export async function getLocalMenu(locale: string, ver: string) {
  return localRequest<MenuDataItem[]>(`/json/menu/${locale}.json?v=${ver}`, {
    method: 'get',
    headers: {
      'Content-Type': 'application/json',
    },
  });
}
/**获取当前版本号 */
export async function getCurVer() {
  return localRequest<string>(`/json/ver.json?v=/${new Date().getTime()}`, {
    method: 'get',
    headers: {
      'Content-Type': 'application/json',
    },
  });
}