1. 新建一个dva项目。使用antd 或者antd-mobile组件库。

  1. $ npm install dva-cli -g
  2. $ dva -v
  3. $ dva new dva-quickstart
  4. $ npm start
  1. $  npm  install antd babel-plugin-import --save
  2. 或者是 
  3. $  npm  install antd-mobile babel-plugin-import --save

导入方式css

  1. {
  2.   "entry": "src/index.js",
  3.   "env": {
  4.     "development": {
  5.       "extraBabelPlugins": [
  6.         "dva-hmr",
  7.         "transform-runtime",
  8.         ["import", { "libraryName": "antd-mobile", "style": "css" }]
  9.       ]
  10.     },
  11.     "production": {
  12.       "extraBabelPlugins": [
  13.         "transform-runtime",
  14.         ["import", { "libraryName": "antd-mobile", "style": "css" }]
  15.       ]
  16.     }
  17.   }
  18. }

2. 在该项目的src中utils 创建名为request文件夹。

  1. $ cd  dva-quickstart
  2. $ cd  src 
  3. $ cd utils

新建文件夹名为request，然后在request文件夹下面创建名为helpers的文件夹以及index.js 和 README.md , request.js 如图所示：

在helpers 下建三个js文件 combineURL.js , isAbsoluteURL.js , serialize.js
react中请求接口的封装 - 图1

combineURL.js中 ：

  1. // Creates a new URL by combining the specified URLs
  2. const combineURL = (baseUrl, path) => {
  3.   return `${baseUrl.replace(/\/+$/, '')}/${path.replace(/^\/+/, '')}`;
  4. };
  6. export default combineURL;

isAbsoluteURL.js中 ：

  1. // A URL is considered absolute if it begins with "<scheme>://" or "//" (protocol-relative URL).
  2. // RFC 3986 defines scheme name as a sequence of characters beginning with a letter and followed
  3. // by any combination of letters, digits, plus, period, or hyphen.
  4. // https://www.ietf.org/rfc/rfc3986.txt
  5. const isAbsoluteURL = (url) => /^([a-z][a-z\d\+\-\.]*:)?\/\//i.test(url);
  7. export default isAbsoluteURL;

serialize.js中 ：

  1. import { isPresent } from 'lib/lang';
  3. const encode = (value) => {
  4.   return encodeURIComponent(value)
  5.     .replace(/%40/gi, '@')
  6.     .replace(/%3A/gi, ':')
  7.     .replace(/%24/g, '$')
  8.     .replace(/%2C/gi, ',')
  9.     .replace(/%20/g, '+')
  10.     .replace(/%5B/gi, '[')
  11.     .replace(/%5D/gi, ']');
  12. };
  14. // Encode a set of form elements as a string for submission.
  15. const serialize = (params) => {
  16.   const ret = [];
  17.   Object.keys(params).forEach(key => {
  18.     const value = params[key];
  19.     if (isPresent(value)) {
  20.       ret.push(`${encode(key)}=${encode(value)}`);
  21.     }
  22.   });
  24.   return ret.join('&');
  25. };
  27. export default serialize;

3. 在utils下创建一个与request同级的lang.js

lang.js 如下:

  1. export const isPresent = (obj) => {
  2.   return typeof obj !== 'undefined' && obj !== null;
  3. };
  5. export const isBlank = (obj) => {
  6.   return typeof obj === 'undefined' || obj === null;
  7. };
  9. export const isBoolean = (obj) => {
  10.   return typeof obj === 'boolean';
  11. };
  13. export const isNumber = (obj) => {
  14.   return typeof obj === 'number';
  15. };
  17. export const isString = (obj) => {
  18.   return typeof obj === 'string';
  19. };
  21. export const isArray = (obj) => {
  22.   return Array.isArray(obj) || Object.prototype.toString.call(obj) === '[object Array]';
  23. };
  25. export const isDate = (obj) => {
  26.   return obj instanceof Date && !isNaN(obj.valueOf());
  27. };
  29. export const isFunction = (obj) => {
  30.   return typeof obj === 'function';
  31. };
  33. export const isJsObject = (obj) => {
  34.   return obj !== null && (isFunction(obj) || typeof obj === 'object');
  35. };
  37. export const isPromise = (obj) => {
  38.   return isPresent(obj) && isFunction(obj.then);
  39. };
  41. export const isEmpty = (obj) => {
  42.   if (isBlank(obj)) {
  43.     return true;
  44.   }
  46.   if (obj.length === 0) {
  47.     return true;
  48.   }
  50.   for (const key in obj) {
  51.     if (Object.prototype.hasOwnProperty.call(obj, key)) {
  52.       return false;
  53.     }
  54.   }
  56.   return true;
  57. };
  59. export const normalizeBlank = (obj) => {
  60.   return isBlank(obj) ? null : obj;
  61. };
  63. export const normalizeBool = (obj) => {
  64.   return isBlank(obj) ? false : obj;
  65. };
  67. export const stringify = (token) => {
  68.   if (isString(token)) {
  69.     return token;
  70.   }
  72.   if (isBlank(token)) {
  73.     return String(token);
  74.   }
  76.   const ret = token.toString();
  77.   const newLineIndex = ret.indexOf('\n');
  78.   return (newLineIndex === -1) ? ret : ret.substring(0, newLineIndex);
  79. };
  81. export class PromiseWrapper {
  82.   // Excutes promises one by one, e.g.
  83.   // const promise = () => new Promise(...)
  84.   // const promise2 = () => new Promise(...)
  85.   // sequentialize([ promise, promise2 ])
  86.   static sequentialize = promiseFactories => {
  87.     let chain = Promise.resolve();
  88.     promiseFactories.forEach(factory => {
  89.       chain = chain.then(factory);
  90.     });
  91.     return chain;
  92.   }
  94.   // Promise finally util similar to Q.finally
  95.   // e.g. finally(promise.then(...))
  96.   /* eslint-disable consistent-return */
  97.   static finally = (promise, cb) => promise.then(res => {
  98.     const otherPromise = cb();
  99.     if (typeof otherPromise.then === 'function') {
  100.       return otherPromise.then(() => res);
  101.     }
  102.   }, reason => {
  103.     const otherPromise = cb();
  104.     if (typeof otherPromise.then === 'function') {
  105.       return otherPromise.then(() => {
  106.         throw reason;
  107.       });
  108.     }
  109.     throw reason;
  110.   })
  111. }
  112. /* eslint-enable consistent-return */
  114. export class StringWrapper {
  115.   static equals = (s1, s2) => s1 === s2;
  117.   static contains = (s, substr) => s.indexOf(substr) !== -1;
  119.   static compare = (a, b) => {
  120.     if (a < b) {
  121.       return -1;
  122.     } else if (a > b) {
  123.       return 1;
  124.     }
  126.     return 0;
  127.   }
  128. }
  130. /* eslint-disable max-params */
  131. export class DateWrapper {
  132.   static create(
  133.     year,
  134.     month = 1,
  135.     day = 1,
  136.     hour = 0,
  137.     minutes = 0,
  138.     seconds = 0,
  139.     milliseconds = 0
  140.   ) {
  141.     return new Date(year, month - 1, day, hour, minutes, seconds, milliseconds);
  142.   }
  144.   static fromISOString(str) {
  145.     return new Date(str);
  146.   }
  148.   static fromMillis(ms) {
  149.     return new Date(ms);
  150.   }
  152.   static toMillis(date) {
  153.     return date.getTime();
  154.   }
  156.   static now() {
  157.     return Date.now() || new Date();
  158.   }
  160.   static toJson(date) {
  161.     return date.toJSON();
  162.   }
  163. }
  164. /* eslint-enable max-params */

4.这个是dva自动生成的request.js 把这个文件换下名字requests.js，它与lang.js同级。

  1. import fetch from 'dva/fetch';
  3. function parseJSON(response) {
  4.   return response.json();
  5. }
  7. function checkStatus(response) {
  8.   if (response.status >= 200 && response.status < 300) {
  9.     return response;
  10.   }
  12.   const error = new Error(response.statusText);
  13.   error.response = response;
  14.   throw error;
  15. }
  17. function parseErrorMessage({ data }) {
  18.   const { status, message } = data;
  19.   if (status === 'error') {
  20.     throw new Error(message);
  21.   }
  22.   return { data };
  23. }
  25. export default function request(url, options) {
  26.   return fetch(url, options)
  27.     .then(checkStatus)
  28.     .then(parseJSON)
  29.     .then(parseErrorMessage)
  30.     .then((data) => ({ data }))
  31.     .catch((err) => ({ err }));
  32. }

request.js

  1. import fetch from 'dva/fetch';
  2. import { isEmpty } from '../lang';
  3. import serialize from './helpers/serialize';
  4. import combineURL from './helpers/combineURL';
  5. import isAbsoluteURL from './helpers/isAbsoluteURL';
  6. import { apiBaseUrl } from '../../config';
  7. import { Toast } from 'antd-mobile';
  9. const wait = ms => new Promise(resolve => setTimeout(resolve, ms));
  11. const timeout = (p, ms = 30 * 1000) =>
  12.   Promise.race([
  13.     p,
  14.     wait(ms).then(() => {
  15.       const error = new Error(`Connection timed out after ${ms} ms`);
  16.       error.statusCode = 408;
  17.       throw error;
  18.     }),
  19.   ]);
  21. // Request factory
  22. function request(url, options, method) {
  23.   const { endpoint, ...rest } = interceptRequest(url, options, method);
  24.   const xhr = fetch(endpoint, rest).then(interceptResponse);
  25.   return timeout(xhr, request.defaults.timeout).catch((error) => {
  26.     // return Promise.reject(error);
  28.   });
  29. }
  31. request.defaults = {
  32.   baseURL: apiBaseUrl,
  33.   timeout: 10 * 5000,
  34.   headers: {
  35.     Accept: 'application/json',
  36.   },
  37. };
  39. // Headers factory
  40. const createHeaders = () => {
  41.   const headers = {
  42.     ...request.defaults.headers,
  43.   };
  45.   // const auth = JSON.parse(localStorage.getItem('auth'+sessionStorage.getItem("hid")));
  47.   // const token = sessionStorage.getItem('token'); // <Michael> 登录location获取到的token存放l
  50.   // if (auth) {
  51.   //   // Toast.info(`请稍等: ${token}`, 2);
  52.   //   // Toast.loading('');
  54.   //   headers.Authorization = auth.Token;
  55.   // } else if (token) {
  56.   //   // <Michael>;
  57.   //   // Toast.info(`请稍等: ${token}`, 2);
  58.   //   // Toast.loading('');
  59.   //   headers.Authorization = token;
  61.   // }
  62.   headers.Authorization = "app";
  63.   return headers;
  64. };
  66. // Request interceptor
  67. function interceptRequest(url, options, method) {
  68.   let endpoint;
  69.   if (isAbsoluteURL(url)) {
  70.     endpoint = url;
  71.   } else {
  72.     endpoint = combineURL(request.defaults.baseURL, url);
  73.   }
  75.   let data = {
  76.     method,
  77.     endpoint,
  78.     headers: createHeaders(),
  79.   };
  81.   if (!isEmpty(options)) {
  82.     data = {
  83.       ...data,
  84.       ...options,
  85.     };
  87.     if (options.json) {
  88.       data.headers['Content-Type'] = 'application/json;charset=utf-8';
  89.       data.body = JSON.stringify(options.json);
  90.     }
  92.     if (options.form) {
  93.       data.headers['Content-Type'] = 'application/x-www-form-urlencoded;charset=utf-8';
  94.       data.body = serialize(options.form);
  95.     }
  97.     if (options.body) {
  98.       data.body = options.body;
  100.       const auth = JSON.parse(localStorage.getItem('auth'+sessionStorage.getItem("hid")));
  102.       if (auth) {
  103.         if (auth && options.body instanceof FormData && !options.body.hasPatientid) {
  104.           // options.body.append('patientid', auth.Patientid);
  105.         }
  106.       }
  107.     }
  109.     if (options.params) {
  110.       endpoint += `?${serialize(options.params)}`;
  111.       data.endpoint = endpoint;
  112.     }
  113.   }
  115.   return data;
  116. }
  118. // Response interceptor
  119. /* eslint-disable consistent-return */
  120. function interceptResponse(response) {
  121.   return new Promise((resolve, reject) => {
  122.     const emptyCodes = [204, 205];
  124.     // Don't attempt to parse 204 & 205
  125.     if (emptyCodes.indexOf(response.status) !== -1) {
  126.       return resolve(response.ok);
  127.     }
  129.     if (response.ok) {
  130.       const contentType = response.headers.get('Content-Type');
  131.       if (contentType.includes('application/json')) {
  132.         resolve(response.json());
  133.       }
  135.       resolve(response);
  136.     }
  138.     if (response.status === 401) {
  139.       // return Toast.fail('认证信息已过期，请重新登录', 2, () => {
  140.       // return Toast.fail('请重新登录', 2, () => { 
  141.         localStorage.removeItem('auth'+sessionStorage.getItem("hid"));
  142.         // sessionStorage.removeItem('token');
  143.         location.reload();
  144.         // TODO:跳转登录路由
  145.       // });
  146.     }
  148.     const error = new Error(response.statusText);
  149.     try {
  150.       response.clone().json().then((result) => {
  151.         error.body = result;
  152.         error.response = response;
  153.         reject(error);
  154.       });
  155.     } catch (e) {
  156.       error.response = response;
  157.       reject(error);
  158.     }
  159.   });
  160. }
  161. /* eslint-enable consistent-return */
  163. // suger
  164. request.get = (url, options) => request(url, options, 'GET');
  166. request.head = (url, options) => request(url, options, 'HEAD');
  168. request.options = (url, options) => request(url, options, 'OPTIONS');
  170. request.post = (url, options) => request(url, options, 'POST');
  172. request.put = (url, options) => request(url, options, 'PUT');
  174. request.delete = (url, options) => request(url, options, 'DELETE');
  176. request.del = request.delete;
  178. export default request;

5. 这样你就可以在今后的项目正常使用按照以下步骤

  1. module.exports = {
  2.     apiBaseUrl: "http://172.118.100.50/api/",
  3. };

之后再services文件下就可以这样去下啦:

  1. import request from '../utils/request/request';
  3. export function queryScaleMenu(start, limit) {
  4.    const body = new FormData();
  5.     body.append('start',start);
  6.     body.append('limit', limit);
  7.     return request.post('news/menu/query', { body });
  8. }

简书地址： https://www.jianshu.com/p/007196101cf1
更新日期： 2018.01.24 18:49