React專案實踐系列二

DYS1230發表於2018-06-09
React

資料分析平臺-實踐系列二

這期主要講介面的請求配置

設定代理

上一篇文章說明了使用遠端Mock Server，那下一步就是讓前端請求Mock環境了。

建立一個測試介面

React專案實踐系列二

在專案中便可直接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
    }
  }
複製程式碼

建立多個專案介面，設定不同的代理。

React專案實踐系列二

React專案實踐系列二

請求介面

如果使用原生的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);
    }
);
複製程式碼

相關文章