在umi框架下進行開發，與後臺互動可以使用自定義請求util，直接對fetch進行底層封裝，自主性強。也可以使用框架提供的request配置，更全面的進行開發。

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

 1 //Author:guanghe
 2 import {fetch} from 'dva';
 3 import {Modal} from 'antd';
 4 
 5 const assyParams = (obj) => {
 6   let str = ''
 7   for (let key in obj) {
 8     const value = typeof
 
 obj[key] !== 'string' ? JSON.stringify(obj[key]) : obj[key]
 9     str += '&' + key + '=' + value
10   }
11   return str.substr(1)
12 }
13 
14 export function checkStatus(response) {
15   if (response.status >= 200 && response.status < 300) {
16     return response;
17   }
18   let err = new
 
 Error(response.statusText);
19   err.content = <>
20     <div>{response.status} {response.statusText}</div>
21     <div>{response.url}</div>
22   </>;
23   throw err;
24 }
25 
26 export function checkResult(res, tip = false) {
27   if (res.code == 0) {
28     if(tip) {
 
29       Modal.success({
30         title: "請求成功！",
31         content: <>{res.msg}</>
32       });
33     }
34     return res.data;
35   }
36   let err = new Error(res.msg);
37   err.content = <>
38     {res.msg}
39   </>;
40   throw err;
41 }
42 
43 //自己封裝的request，但推薦使用@@/plugin-request/request
44 export default function request(requestData, tip = false) {
45   let {url, method} = requestData;
46   let options = {
47     method,
48     headers: {
49       'Content-Type': 'application/json; charset=utf-8',
50     },
51     credentials: 'include' //是否攜帶cookie，預設為omit不攜帶; same-origi同源攜帶; include同源跨域都攜帶
52   };
53   if (method.toLowerCase() === 'get') {
54     url = requestData.url + '?' + assyParams(requestData.data);
55   }
56   if (method.toLowerCase() === 'post') {
57     options.body = JSON.stringify(requestData.data);
58   }
59   return fetch(url, options)
60     .then(checkStatus)
61     .then(response => response.json())
62     .then((res) => checkResult(res, tip))
63     .catch((err) => {
64       Modal.error({
65         title: "請求異常！",
66         content: err.content
67       });
68     });
69 }

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

 1 //Author:guanghe
 2 import { RequestConfig } from 'umi';
 3 import {Modal} from 'antd';
 4 
 5 const codeMessage:{ [key: number]: string; } = {
 6   200: '伺服器成功返回請求的資料。',
 7   201: '新建或修改資料成功。',
 8   202: '一個請求已經進入後臺排隊（非同步任務）。',
 9   204: '刪除資料成功。',
10   400: '發出的請求有錯誤，伺服器沒有進行新建或修改資料的操作。',
11   401: '使用者沒有許可權（令牌、使用者名稱、密碼錯誤）。',
12   403: '使用者得到授權，但是訪問是被禁止的。',
13   404: '發出的請求針對的是不存在的記錄，伺服器沒有進行操作。',
14   406: '請求的格式不可得。',
15   410: '請求的資源被永久刪除，且不會再得到的。',
16   422: '當建立一個物件時，發生一個驗證錯誤。',
17   500: '伺服器發生錯誤，請檢查伺服器。',
18   502: '閘道器錯誤。',
19   503: '服務不可用，伺服器暫時過載或維護。',
20   504: '閘道器超時。',
21 };
22 
23 interface error {
24   name:string,
25   data:any,
26   type: string,
27   response:{
28     status:number,
29     statusText:string,
30     url:string
31   }
32 }
33 
34 const errorHandler = (error:error) => {
35   //適配errorConfig中自定義的error
36   if(error.name==="BizError"){
37     Modal.error({
38       title: `請求錯誤 ${error.data.code}`,
39       content: error.data.msg,
40     });
41     throw new Error(error.data.msg);
42   }
43   //適配網路error，即error.name == "ResponseError"
44   const { response } = error;
45   const { status, url } = response;
46   let title = `請求錯誤 ${status}: ${url}`;
47   const content = codeMessage[response.status] || response.statusText;
48   Modal.error({
49     title,
50     content,
51   });
52   throw new Error();
53 };
54 
55 export const request: RequestConfig = {
56   prefix: '/api/centerbusiness',
57   method: "post",
58   requestType: "json",
59   errorHandler,
60   errorConfig: {
61     adaptor: res => {
62       return {
63         //success為false，則umi丟擲error.name為BizError的異常
64         success: res.code == 0,
65       };
66     },
67   },
68 };