React項目實踐系列二

數據分析平臺-實踐系列二

這期主要講接口的請求配置

設置代理

上一篇文章說明了使用遠程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);
    }
);