前后端通信

前后端通信通常使用 AJAX 方案，对于 AJAX 社区有非常多的封装，目前主流推荐 axios。

使用 axios 进行通信

安装依赖：

  1. $ npm install axios --save

通常情况下，AJAX 请求都是异步的，因此 axios 默认返回一个 Promise，因此你可以通过 Promise 或者 async/await 的方式调用：

  1. import axios from 'axios';
  3. // async/await 方式使用
  4. async function getUser() {
  5.   try {
  6.     const response = await axios.get('/user', {
  7.       // request query
  8.       params: {
  9.         id: 1
  10.       }
  11.     });
  12.     console.log(response);
  13.   } catch (error) {
  14.     console.error(error);
  15.   }
  16. }
  18. // Promise 方式调用
  19. axios.get('/user')
  20.   .then(function (response) {
  21.     console.log(response);
  22.   })
  23.   .catch(function (error) {
  24.     console.log(error);
  25.   });
  27. // 发送 POST 请求
  28. axios({
  29.   method: 'post',
  30.   url: '/user',
  31.   // request query
  32.   params: { foo: 'bar' },
  33.   // request body
  34.   data: {
  35.     firstName: 'Fred',
  36.     lastName: 'Flintstone'
  37.   }
  38. });

在这些基础功能上，axios 支持对请求进行自定义配置，如请求参数、异常状态码判断、全局处理异常、全局配置请求参数等，具体参见 axios 文档。

业务里通常会有请求成功或失败的通用逻辑，建议参考下文为业务封装统一的请求方法。

在 React 组件中请求并渲染数据

请求异步数据并渲染，往往需要在视图上区分不同的视图，比如加载中、接口出错、渲染数据，此处以 Function Component + Hooks 为例：

  1. import React, { useState } from 'react';
  3. function CustomComponent {
  4.   const [data, setData] = useState([]);
  5.   const [loading, setLoading] = useState(false);
  6.   const [error, setError] = useState(null);
  8.   useEffect(() => {
  9.     const fetchData = async () => {
  10.       setLoading(true);
  11.       try {
  12.         const result = await axios('/list');
  13.         setData(result.data);
  14.       } catch (err) {
  15.         setError(err);
  16.       }
  17.       setLoading(false);
  18.     };
  20.     fetchData();
  21.   }, []);
  23.   return (
  24.     <>
  25.       {error && <div>{error.message}</div>}
  26.       {
  27.         loading ? <div>loading...</div> : (
  28.           (data || []).map((item, idx) => {
  29.             return <div key={idx}>{item.name}</div>;
  30.           })
  31.         )
  32.       }
  33.     </>
  34.   );
  35. }

简化请求状态

通过上面的例子，会发现每个请求都包含请求成功、加载中、请求异常三个状态，如果每个请求都这样处理就会非常繁琐，因此接下来介绍如何通过封装让业务层无需关心请求过程中的这么多状态。对于 React 16.8.0 以下不支持 Hooks 的项目建议使用组件 DataBinder。

在业务代码中封装 request 以及 useRequest 的通用方法：

  1. // src/utils/request.js
  2. import { useReducer } from 'react';
  3. import axios from 'axios';
  4. import { Message } from '@alifd/next';
  6. // Set baseURL when debugging production url in dev mode
  7. // axios.defaults.baseURL = '//xxxx.taobao.com';
  9. /**
  10.  * Method to make ajax request
  11.  *
  12.  * @param {object} options - axios config (https://github.com/axios/axios#request-config)
  13.  */
  14. export async function request(options) {
  15.   try {
  16.     const response = await axios(options);
  17.     const { data, error } = handleResponse(response);
  18.     if (error) {
  19.       throw error;
  20.     } else {
  21.       return { response, data };
  22.     }
  23.   } catch (error) {
  24.     console.error(error);
  25.     throw error;
  26.   }
  27. }
  29. /**
  30.  * Hooks to make ajax request
  31.  *
  32.  * @param {object} options - axios config (https://github.com/axios/axios#request-config)
  33.  * @return {object}
  34.  *   @param {object} response - response of axios (https://github.com/axios/axios#response-schema)
  35.  *   @param {object} error - HTTP or use defined error
  36.  *   @param {boolean} loading - loading status of the request
  37.  *   @param {function} request - function to make the request manually
  38.  */
  39. export function useRequest(options) {
  40.   const initialState = {
  41.     response: null,
  42.     loading: false,
  43.     error: null,
  44.   };
  45.   const [state, dispatch] = useReducer(requestReducer, initialState);
  47.   /**
  48.    * Method to make request manually
  49.    * @param {object} config - axios config to shallow merged with options before making request
  50.    */
  51.   async function request(config) {
  52.     try {
  53.       dispatch({
  54.         type: 'init',
  55.       });
  57.       const response = await axios({
  58.         ...options,
  59.         ...config,
  60.       });
  62.       const { data, error } = handleResponse(response);
  64.       if (error) {
  65.         throw error;
  66.       } else {
  67.         dispatch({
  68.           type: 'success',
  69.           response,
  70.         });
  71.         return { response, data };
  72.       }
  73.     } catch (error) {
  74.       dispatch({
  75.         type: 'error',
  76.         error,
  77.       });
  78.       throw error;
  79.     }
  80.   }
  82.   return {
  83.     ...state,
  84.     request,
  85.   };
  86. }
  88. /**
  89.  * Reducer to handle the status of the request
  90.  * @param {object} state - original status
  91.  * @param {object} action - action of dispatch
  92.  * @return {object} new status
  93.  */
  94. function requestReducer(state, action) {
  95.   switch (action.type) {
  96.     case 'init':
  97.       return {
  98.         response: null,
  99.         error: null,
  100.         loading: true,
  101.       };
  102.     case 'success':
  103.       return {
  104.         response: action.response,
  105.         error: null,
  106.         loading: false,
  107.       };
  108.     case 'error':
  109.       return {
  110.         response: null,
  111.         error: action.error,
  112.         loading: false,
  113.       };
  114.     default:
  115.       return {
  116.         response: null,
  117.         error: null,
  118.         loading: false,
  119.       };
  120.   }
  121. }
  123. /**
  124.  * Custom response data handler logic
  125.  *
  126.  * @param {object} response - response data returned by request
  127.  * @return {object} data or error according to status code
  128.  */
  129. function handleResponse(response) {
  130.   const { data } = response;
  131.   // Please modify the status key according to your business logic
  132.   // normally the key is `status` or `code`
  133.   if (data.status === 'SUCCESS') {
  134.     return { data };
  135.   } else if (data.status === 'NOT_LOGIN') {
  136.     location.href = '';
  137.   } else {
  138.     const error = new Error(data.message || '后端接口异常');
  139.     return { error };
  140.   }
  141. }

单独使用 request 方法：

  1. import { request } from '@/utils/request';
  3. async function test() {
  4.   try {
  5.     const { response, data } = await request({
  6.        url: '/api/list',
  7.     });
  8.     console.log('success', data);
  9.   } catch(err) {
  10.     // request 方法已处理异常，通常这里不需要做特殊处理
  11.     console.error(err);
  12.   }
  13. }

在组件中使用 useRequest 请求数据并渲染：

  1. import { useRequest } from '@/utils/request';
  3. function ListView(props) {
  4.   const { loading, error, response, request } = useRequest({
  5.     url: '/api/list',
  6.     method: 'GET',
  7.   });
  8.   const dataSource = response ? response.data.dataSource : [];
  10.   useEffect(() => {
  11.     request();
  12.   }, []);
  14.   return (
  15.     <>
  16.       {error && <div>{error.message}</div>}
  17.       {loading ? (
  18.         <div>loading....</div>
  19.       ) : (
  20.         data.map(item => {
  21.           return <div>{item.name}</div>;
  22.         })
  23.       )}
  24.     </>
  25.   );
  26. }

跨域问题

因为浏览器的同源策略，前端经常要面临跨域问题，同源策略/SOP（Same origin policy）是一种约定，由 Netscape 公司 1995 年引入浏览器，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到 XSS、CSFR 等攻击。所谓同源是指协议、域名、端口三者相同，因此如果当前页面与发起 AJAX 请求的地址中协议、域名、端口有一个不一致，则会出现跨域问题，跨域问题最明显的现象是 AJAX 接口无法请求成功。

应对跨域问题有非常多的方案，当下主流以及推荐的方案是 CORS(Cross-origin resource sharing)，CORS 是一个 W3C 标准，全称是跨域资源共享。它允许浏览器向跨源服务器发起 MLHttpRequest 请求，从而克服了同源策略的限制。CORS 需要服务端配置一些头信息，这方面谷歌上有非常多的内容可以参考，这里不再详细描述，具体可参考 跨域资源共享 CORS 详解。