## 一、概述 前端在 service 模块封装了后端交互代码，通过 API 的形式可以和任何技术栈的后端应用一起工作； 具体流程如下： * 组件内调用 service 服务 API * service 服务 API 封装请求数据，通过 request.js 发送请求 * 组件获取 service 返回的数据，更新视图数据或触发其它行为 ## 二、登录为例说明前后端交互流程 前端代码模块： ~~~ ... ├── src │ └── services # 数据服务模块 │ ├── user.js # 用户数据服务 │ ... │ ├── api.js # api.js 用于服务请求地址的统一管理 │ └── index.js # 用于模块化导出服务 ... │ └── utils # 数据服务模块 │ ├── request.js # 基于 axios 的 http 请求工具 ... ~~~ >[info] > 1、services 文件夹下， api.js 用于服务请求地址的统一管理，index.js 用于模块化导出服务，其它 *.js 文件对应各个服务模块； > 2、utils文件夹下，request.js 基于 axios 封装了一些常用的函数； ## 三、后端url配置 你可以在项目根目录下的环境变量文件(.env 和 .env.development)中配置你的 API 服务 base url 地址。 生产环境，.env 文件 开发环境，.env.development 文件 ## 四、http交互拦截器 前端基于 aixos 封装了 http 通信功能，可以为 http 请求响应配置一些拦截器。拦截器统一配置在 /utils/axios-interceptors.js 文件中； ### **请求拦截器** 为每个请求拦截器配置`onFulfilled`或`onRejected`两个钩子函数； ### onFulfilled 会为 onFulfilled 钩子函数注入 config 和 options 两个参数： * `config: AxiosRequestConfig`: axios 请求配置，详情参考[axios 请求配置](http://www.axios-js.com/zh-cn/docs/#%E8%AF%B7%E6%B1%82%E9%85%8D%E7%BD%AE) * `options: Object`: 应用配置，包含: {router, i18n, store, message}，可根据需要扩展； ### onRejected 会为 onRejected钩子函数注入 error 和 options 两个参数： * `error: Error`: axios 请求错误对象 * `options: Object`: 应用配置，包含: {router, i18n, store, message}，可根据需要扩展； ``` ## 完整的请求拦截器配置： const requestCheck = { // 发送请求之前做些什么 onFulfilled(config, options) { const {message} = options const {url, xsrfCookieName} = config if (url.indexOf('login') === -1 && xsrfCookieName && !Cookie.get(xsrfCookieName)) { message.warning('认证 token 已过期，请重新登录') } return config }, // 请求出错时做点什么 onRejected(error, options) { const {message} = options message.error(error.message) return Promise.reject(error) } } ``` ### **响应拦截器** 响应拦截器也同样可以配置`onFulfilled`或`onRejected`两个钩子函数； ### onFulfilled 会为 onFulfilled 钩子函数注入 response 和 options 两个参数： * `response: AxiosResponse`: axios 响应对象，详情参考[axios 响应对象](http://www.axios-js.com/zh-cn/docs/#%E5%93%8D%E5%BA%94%E7%BB%93%E6%9E%84) * `options: Object`: 应用配置，包含: {router, i18n, store, message}，可根据需要扩展； ### onRejected 会为 onFulfilled 钩子函数注入 error 和 options 两个参数： * `error: Error`: axios 请求错误对象 * `options: Object`: 应用配置，包含: {router, i18n, store, message}，可根据需要扩展； ``` ## 完整的响应拦截器配置： const responseCheck = { // 响应数据之前做点什么 onFulfilled(response, options) { const {message} = options if (response.status === 401) { message.error('无此接口权限') } return response }, // 响应出错时做点什么 onRejected(error, options) { const {message} = options if (response.status === 401) { message.error('无此接口权限') } return Promise.reject(error) } } ``` ### 应用例子 如：请求之前，先进行编码； 定义：  导出对象：  ### **导出拦截器**