資料分析平臺-實踐系列二
這期主要講介面的請求配置
設定代理
上一篇文章說明了使用遠端Mock Server
,那下一步就是讓前端請求Mock
環境了。
建立一個測試介面
在專案中便可直接fetch('https://mock.yonyoucloud.com/mock/212/user/getAll')
便可。
但是此處會有一個問題,現在在開發環境下是請求Mock
,而一旦到生產環境,應該是需要寫成fetch('/user/getAll')
。
因此需要新增代理請求,讓生產環境與開發環境請求相同的介面。
webpack-dev-server
基於node-http-proxy實現了反向代理。在配置檔案設定devServer
屬性便可實現代理功能。而create-react-app
是在package.json
設定代理。
"proxy": {
"/user/": {
"target": "https://mock.yonyoucloud.com/mock/212",
"changeOrigin": true
}
}
複製程式碼
建立多個專案介面,設定不同的代理。
請求介面
如果使用原生的fetch
,我們需要對fetch
做多一層封裝,而npm
上原本就有其他好用的HTTP庫
可以使用,無需重複造輪子。在專案中,我們選用了axios
。
在使用axios
前,需要對所有的請求與響應進行統一攔截,以便後期管理。而axios
已經為我們實現了此功能。
// 請求攔截
axios.interceptors.request.use(
config => {
return config
},
error => {
return Promise.reject(error);
}
);
// 響應攔截
axios.interceptors.response.use(
response => {
return response;
},
error => {
return Promise.reject(error);
}
);
複製程式碼
如攔截響應為500的錯誤,我們需要彈出提示框伺服器錯誤。使用Ant Design
的message
全域性提示。
import {message} from 'antd';
axios.interceptors.response.use(
response => {
return response;
},
error => {
if (error.response && error.response.status === 500) {
message.error('伺服器錯誤');
}
return Promise.reject(error);
}
);
複製程式碼
環境設定
在設定請求後,還有一個問題,後臺使用Tomcat
,其設定self
字首為訪問伺服器路徑,app
字首為訪問靜態資源路徑。
而當我們在Mock
環境下專案是根據業務來建立的,即如請求使用者資訊,為user字首,請求文章資訊,為article字首,那麼,現在面臨如果是JAVA
環境,所有介面需要新增self
字首,為MOCK
環境則無需新增。因此需要自定義環境變數。
NODE_ENV
就是一個常用的環境變數,一般設為production
或者development
。而其實環境變數設定原理其實就是設定Node.js
中的process.env
。
我們在package.json
中的scripts
新增啟動命令。
"windowsmock": "set REACT_APP_SERVER=mock&&npm start",
"windowsjava": "set REACT_APP_SERVER=java&&npm start",
"linuxmock": "export REACT_APP_SERVER=mock && npm start",
"linuxjava": "export REACT_APP_SERVER=java && npm start",
"windowsbuild": "set PUBLIC_URL=/app&&set REACT_APP_SERVER=java&&npm run build",
"linuxbuild": "export PUBLIC_URL=/app && export REACT_APP_SERVER=java && npm run build"
複製程式碼
這裡需要區分作業系統。在*nix
下設定環境變數為export
,而在windows
下則是set
。並且由於使用create-react-app
,自定義環境變數需要以REACT_APP_
為字首。
之後我們對命令再做一次精簡,使用cross-env
,cross-env
能跨平臺地設定及使用環境變數。先新增依賴yarn add cross-env -D
,之後改動命令。
"mock": "cross-env REACT_APP_SERVER=mock npm start",
"java": "cross-env REACT_APP_SERVER=java npm start",
"appbuild": "cross-env REACT_APP_SERVER=java PUBLIC_URL=/app npm run build"
複製程式碼
使用yarn mock
或npm run mock
。在程式碼中console.log(process.env.REACT_APP_SERVER)
,可在控制檯看到輸出了java
。
其後改動axios
的攔截器。
axios.interceptors.request.use(
config => {
if (process.env.REACT_APP_SERVER === 'java') {
config.url = `/self${config.url}`;
}
return config
},
error => {
return Promise.reject(error);
}
);
複製程式碼