## 一、概述 前端在 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) } } ``` ### 應用例子 如：請求之前，先進行編碼； 定義：  導出對象：  ### **導出攔截器**