React項目實踐系列二

wind3110991 發布于2019-08-26 12:02 / 2275人閱讀

摘要：數據分析平臺實踐系列二這期主要講接口的請求配置設置代理上一篇文章說明了使用遠程，那下一步就是讓前端請求環境了。建立一個測試接口在項目中便可直接便可。在項目中，我們選用了。在使用前，需要對所有的請求與響應進行統一攔截，以便后期管理。

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

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

設置代理

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

GPU云服務器云服務器怎么部署react項目 php項目實踐 python實踐項目 python項目實踐

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/108068.html

前端每周清單年度總結與盤點

摘要：前端每周清單年度總結與盤點在過去的八個月中，我幾乎只做了兩件事，工作與整理前端每周清單。本文末尾我會附上清單線索來源與目前共期清單的地址，感謝每一位閱讀鼓勵過的朋友，希望你們能夠繼續支持未來的每周清單。 showImg(https://segmentfault.com/img/remote/1460000010890043); 前端每周清單年度總結與盤點在過去的八個月中，我幾乎只做了...

jackwang 2019-08-22 15:54 評論0 收藏0
前端資源系列（4）-前端學習資源分享&前端面試資源匯總

摘要：特意對前端學習資源做一個匯總，方便自己學習查閱參考，和好友們共同進步。特意對前端學習資源做一個匯總，方便自己學習查閱參考，和好友們共同進步。本以為自己收藏的站點多，可以很快搞定，沒想到一入匯總深似海。還有很多不足&遺漏的地方，歡迎補充。有錯誤的地方，還請斧正... 托管: welcome to git，歡迎交流，感謝star 有好友反應和斧正，會及時更新，平時業務工作時也會不定期更...

princekin 2019-08-20 11:28 評論0 收藏0
前端每周清單第 41 期 : Node 與 Rust、OpenCV 的火花，網絡安全二三事

摘要：的網站仍然使用有漏洞庫上周發布了開源社區安全現狀報告，發現隨著開源社區的日漸活躍，開源代碼中包含的安全漏洞以及影響的范圍也在不斷擴大。與應用安全是流行的服務端框架，本文即是介紹如何使用以及其他的框架來增強應用的安全性。 showImg(https://segmentfault.com/img/remote/1460000012181337?w=1240&h=826); 前端每周清單專注...

syoya 2019-08-21 17:48 評論0 收藏0
王下邀月熊_Chevalier的前端每周清單系列文章索引

摘要：感謝王下邀月熊分享的前端每周清單，為方便大家閱讀，特整理一份索引。王下邀月熊大大也于年月日整理了自己的前端每周清單系列，并以年月為單位進行分類，具體內容看這里前端每周清單年度總結與盤點。感謝王下邀月熊_Chevalier 分享的前端每周清單，為方便大家閱讀，特整理一份索引。王下邀月熊大大也于 2018 年 3 月 31 日整理了自己的前端每周清單系列，并以年/月為單位進行分類，具...

2501207950 2019-08-22 14:53 評論0 收藏0