成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

React項(xiàng)目實(shí)踐系列二

wind3110991 / 2286人閱讀

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

數(shù)據(jù)分析平臺-實(shí)踐系列二 
這期主要講接口的請求配置
設(shè)置代理

上一篇文章說明了使用遠(yuǎn)程Mock Server，那下一步就是讓前端請求Mock環(huán)境了。

建立一個測試接口

在項(xiàng)目中便可直接fetch("https://mock.yonyoucloud.com/mock/212/user/getAll")便可。

但是此處會有一個問題，現(xiàn)在在開發(fā)環(huán)境下是請求Mock，而一旦到生產(chǎn)環(huán)境，應(yīng)該是需要寫成fetch("/user/getAll")。

因此需要添加代理請求，讓生產(chǎn)環(huán)境與開發(fā)環(huán)境請求相同的接口。

webpack-dev-server基于node-http-proxy實(shí)現(xiàn)了反向代理。在配置文件設(shè)置devServer屬性便可實(shí)現(xiàn)代理功能。而create-react-app是在package.json設(shè)置代理。

  "proxy": {
    "/user/": {
      "target": "https://mock.yonyoucloud.com/mock/212",
      "changeOrigin": true
    }
  }

建立多個項(xiàng)目接口，設(shè)置不同的代理。

請求接口

如果使用原生的fetch，我們需要對fetch做多一層封裝，而npm上原本就有其他好用的HTTP庫 可以使用，無需重復(fù)造輪子。在項(xiàng)目中，我們選用了axios。

在使用axios前，需要對所有的請求與響應(yīng)進(jìn)行統(tǒng)一攔截，以便后期管理。而axios已經(jīng)為我們實(shí)現(xiàn)了此功能。

// 請求攔截
axios.interceptors.request.use(
    config => {
        return config
    },
    error => {
        return Promise.reject(error);
    }
);
// 響應(yīng)攔截
axios.interceptors.response.use(
    response => {
        return response;
    },
    error => {
        return Promise.reject(error);
    }
);

如攔截響應(yīng)為500的錯誤，我們需要彈出提示框服務(wù)器錯誤。使用Ant Design的message全局提示。

import {message} from "antd";
axios.interceptors.response.use(
    response => {
        return response;

    },
    error => {
        if (error.response && error.response.status === 500) {
            message.error("服務(wù)器錯誤");
        }
        return Promise.reject(error);
    }
);
環(huán)境設(shè)置

在設(shè)置請求后，還有一個問題，后臺使用Tomcat，其設(shè)置self前綴為訪問服務(wù)器路徑，app前綴為訪問靜態(tài)資源路徑。

而當(dāng)我們在Mock環(huán)境下項(xiàng)目是根據(jù)業(yè)務(wù)來創(chuàng)建的，即如請求用戶信息，為user前綴，請求文章信息，為article前綴，那么，現(xiàn)在面臨如果是JAVA環(huán)境，所有接口需要添加self前綴，為MOCK環(huán)境則無需添加。因此需要自定義環(huán)境變量。

NODE_ENV就是一個常用的環(huán)境變量，一般設(shè)為production或者development。而其實(shí)環(huán)境變量設(shè)置原理其實(shí)就是設(shè)置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"

這里需要區(qū)分操作系統(tǒng)。在*nix下設(shè)置環(huán)境變量為export，而在windows下則是set。并且由于使用create-react-app，自定義環(huán)境變量需要以REACT_APP_為前綴。

之后我們對命令再做一次精簡，使用cross-env ，cross-env能跨平臺地設(shè)置及使用環(huán)境變量。先添加依賴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);
    }
);

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/108068.html

相關(guān)文章

  • 前端每周清單年度總結(jié)與盤點(diǎn)

    摘要：前端每周清單年度總結(jié)與盤點(diǎn)在過去的八個月中，我?guī)缀踔蛔隽藘杉?，工作與整理前端每周清單。本文末尾我會附上清單線索來源與目前共期清單的地址，感謝每一位閱讀鼓勵過的朋友，希望你們能夠繼續(xù)支持未來的每周清單。 showImg(https://segmentfault.com/img/remote/1460000010890043); 前端每周清單年度總結(jié)與盤點(diǎn) 在過去的八個月中，我?guī)缀踔蛔隽?..

    jackwang 評論0 收藏0

  • 前端資源系列（4）-前端學(xué)習(xí)資源分享&前端面試資源匯總

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

    princekin 評論0 收藏0

  • 前端每周清單第 41 期 : Node 與 Rust、OpenCV 的火花，網(wǎng)絡(luò)安全二三事

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

    syoya 評論0 收藏0

  • 王下邀月熊_Chevalier的前端每周清單系列文章索引

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

    2501207950 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<