成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

React腳手架搭建

DevWiki / 2449人閱讀

摘要：在技術(shù)中，已作為一個(gè)重要的組成部分在使用。為人詬病的缺點(diǎn)之一，就是不能請(qǐng)求。有方案提出提出，通過的方法來模擬。嚴(yán)格的單向數(shù)據(jù)流是架構(gòu)的設(shè)計(jì)核心。服務(wù)集成可選服務(wù)登陸采用的是來記錄狀態(tài)。就這樣，一個(gè)簡(jiǎn)單的腳手架宣告完成。

前言

之前的 multi-spa-webpack-cli 只是為 React + antd 模板提供了開發(fā)時(shí)必要的環(huán)境，對(duì)于實(shí)際的開發(fā)并沒有什么用處。
為了更貼近實(shí)際開發(fā)，本次 React + antd 模板完善了一些功能。

封裝 fetch，新增請(qǐng)求錯(cuò)誤提示；

集成 react-router-dom 路由管理；

集成 react-redux 狀態(tài)管理；

必不可少的 antd 集成；

node 服務(wù)集成（可選）。

node 服務(wù)和 React+antd 模板是沒有多大的關(guān)系的。本文只是想通過一個(gè)簡(jiǎn)單的登陸邏輯來演示以上的功能，所以 node 服務(wù)不是必須的。

multi-spa-webpack-cli 已經(jīng)發(fā)布到 npm，只要在 node 環(huán)境下安裝即可。

npm install multi-spa-webpack-cli -g

使用步驟如下:

# 1. 初始化項(xiàng)目
multi-spa-webpack-cli init spa-project

# 2. 進(jìn)入文件目錄
cd spa-project

# 3. 安裝依賴
npm install

# 4. 打包不變的部分
npm run build:dll

# 5. 啟動(dòng)項(xiàng)目（手動(dòng)打開瀏覽器：localhost:8090）
npm start

# 6. 啟動(dòng)服務(wù)(可選)
cd server
npm install
npm start

預(yù)覽：

封裝 fetch

現(xiàn)在處理異步的方式，大多數(shù)基于 Promise 的。而 fetch 是天然支持 Promise 的，所以無需再手動(dòng)封裝。在 PWA 技術(shù)中，已作為一個(gè)重要的組成部分在使用。

fetch 為人詬病的缺點(diǎn)之一，就是不能 Abort 請(qǐng)求。有方案提出提出，通過 Promise.race 的方法來模擬 timeout。實(shí)際上該執(zhí)行的已然執(zhí)行，只是表象上達(dá)到了預(yù)期的效果。不過瀏覽器現(xiàn)以實(shí)驗(yàn)性開始支持 AbortController 。

import { notification } from "antd";

const env = process.env.NODE_ENV;
const baseURL = APP_CONFIG[env].ip;
// timeout ;
// const controller = new AbortController();
// const signal = controller.signal;
const defaultConfig = {
  credentials: "include",
  headers: {
    Accept: "application/json"
  },
  // signal
};
const codeMessage = {
  301: "永久移動(dòng)",
  302: "臨時(shí)移動(dòng)",
// ...
  504: "網(wǎng)關(guān)超時(shí)。"
};

const checkStatus = response => {
  if (response.status >= 200 && response.status < 300) {
    return response;
  }
  const errortext = codeMessage[response.status] || response.statusText;
  notification.error({
    message: `請(qǐng)求錯(cuò)誤 ${response.status}: ${response.url}`,
    description: errortext
  });
};

export default async function Fetch(url, config) {
  let newUrl = baseURL + url;
  let newConfig = {
    ...defaultConfig,
    ...config
  };
  // const timeoutId = setTimeout(() => controller.abort(), 5000);
  if (
    newConfig.method.toLocaleLowerCase() === "post" ||
    newConfig.method.toLocaleLowerCase() === "put" ||
    newConfig.method.toLocaleLowerCase() === "delete"
  ) {
    if (!(newConfig.body instanceof FormData)) {
      newConfig.headers["Content-Type"] = "application/json; charset=utf-8";
      newConfig.body = JSON.stringify(newConfig.body);
    }
  }
  try {
    const response = await fetch(newUrl, newConfig);
    // clearTimeout(timeoutId);
    return checkStatus(response).json();
  } catch (error) {
    notification.error({
      message: `請(qǐng)求錯(cuò)誤 : ${newUrl}`,
      description: error.message
    });
    throw error;
  }
}
集成 react-router-dom 路由管理

自 raect-router v4 之后，便不再支持集中式管理路由，不過也可以自己手動(dòng)去實(shí)現(xiàn)。React + antd 模板采用的是官網(wǎng)推薦的方式，layouts 目錄下的文件用來管理路由。

集成 react-redux 狀態(tài)管理

Redux 作為狀態(tài)管理工具，除了 React，也可以用在其他地方（意思是說，和 React 沒半毛錢關(guān)系）。在React中使用時(shí)，我們需要借助 React-redux 工具，這樣使用起來更加方便。

嚴(yán)格的單向數(shù)據(jù)流是 Redux 架構(gòu)的設(shè)計(jì)核心。

redux 數(shù)據(jù)流向：

就是把 action（行為） dispatch（丟給）reducer（更新 state）。

node 服務(wù)集成（可選）

node 服務(wù)登陸采用的是 session 來記錄狀態(tài)。

就這樣，一個(gè)簡(jiǎn)單的腳手架宣告完成。

不過，這才只是個(gè)開始。

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/105181.html

相關(guān)文章

  • webpack4詳細(xì)教程，從無到有搭建react腳手架（二）

    摘要：相關(guān)鏈接詳細(xì)教程，從無到有搭建腳手架一配置插件，這兩個(gè)插件基本上是必配的了介紹每次打包時(shí)清理上次打包生成的目錄官網(wǎng)指南關(guān)于這個(gè)插件部分內(nèi)容已經(jīng)過時(shí)沒有更新，按照官網(wǎng)配置會(huì)出錯(cuò)，所以參考上這個(gè)插件文檔來配置，文檔地址生成打 相關(guān)鏈接 webpack4詳細(xì)教程，從無到有搭建react腳手架（一） 配置插件 clean-webpack-plugin、 html-webpack-plugin...

    cuieney 評(píng)論0 收藏0

  • React入門之腳手架搭建項(xiàng)目

    摘要：前言寫此系列博客的目的是對(duì)所學(xué)知識(shí)點(diǎn)的總結(jié)和梳理，包括填坑方案分享，希望能幫助到還并不會(huì)使用的開發(fā)者入門官方文檔中文文檔社區(qū)項(xiàng)目搭建按照官方提供的搭建項(xiàng)目全局安裝或全局安裝后可以使用這條命令創(chuàng)建名為的項(xiàng)目啟動(dòng) 前言 寫此系列博客的目的是對(duì)所學(xué)React知識(shí)點(diǎn)的總結(jié)和梳理，包括填坑方案分享，希望能幫助到還并不會(huì)使用React的開發(fā)者入門React React官方文檔React中文文檔R...

    BingqiChen 評(píng)論0 收藏0

  • webpack4詳細(xì)教程，從無到有搭建react腳手架（四）

    摘要：相關(guān)鏈接詳細(xì)教程，從無到有搭建腳手架一詳細(xì)教程，從無到有搭建腳手架二詳細(xì)教程，從無到有搭建腳手架三管理打包后目錄結(jié)構(gòu)打包結(jié)構(gòu)如下修改配置通過相對(duì)目錄對(duì)資源命名前加上目錄名，效果后面的步驟在這里需要安裝一個(gè)大型的包，以為例安裝為第三 相關(guān)鏈接 webpack4詳細(xì)教程，從無到有搭建react腳手架（一） webpack4詳細(xì)教程，從無到有搭建react腳手架（二） webpack4詳細(xì)...

    chnmagnus 評(píng)論0 收藏0

  • 學(xué)習(xí)從零開始搭建React腳手架

    摘要：寫在前面準(zhǔn)備學(xué)習(xí)一下和相關(guān)的東西，官方的腳手架看起來太繁瑣，所以打算自己來搭建一個(gè)，參考了這個(gè)文檔從零搭建全家桶框架教程步驟上都差不多第一步，依賴總覽完成到我現(xiàn)在半成品的過程中，目前完成開發(fā)模式的相關(guān)操作，添加了按需加載的地步。 寫在前面 準(zhǔn)備學(xué)習(xí)一下react和webpack相關(guān)的東西，官方的腳手架看起來太繁瑣，所以打算自己來搭建一個(gè)，參考了這個(gè)文檔從零搭建React全家桶框架教程;...

    cod7ce 評(píng)論0 收藏0

  • webpack4詳細(xì)教程，從無到有搭建react腳手架（一）

    摘要：是一個(gè)現(xiàn)代應(yīng)用程序的靜態(tài)模塊打包器，前端模塊化的基礎(chǔ)。作為一個(gè)前端工程師切圖仔，非常有必要學(xué)習(xí)。官網(wǎng)的文檔非常的棒，中文文檔也非常給力，可以媲美的文檔。建議先看概念篇章，再看指南，然后看和配置總覽。 webpack 是一個(gè)現(xiàn)代 JavaScript 應(yīng)用程序的靜態(tài)模塊打包器，前端模塊化的基礎(chǔ)。作為一個(gè)前端工程師（切圖仔），非常有必要學(xué)習(xí)。 showImg(https://segment...

    zhkai 評(píng)論0 收藏0

  • webpack4詳細(xì)教程，從無到有搭建react腳手架（三）

    摘要：相關(guān)鏈接詳細(xì)教程，從無到有搭建腳手架一詳細(xì)教程，從無到有搭建腳手架二安裝配置創(chuàng)建，效果安裝配置創(chuàng)建效果配置模式修改配置現(xiàn)在編譯后的由動(dòng)態(tài)內(nèi)聯(lián)在中，需要分離到單獨(dú)的文件安裝插 相關(guān)鏈接 webpack4詳細(xì)教程，從無到有搭建react腳手架（一） webpack4詳細(xì)教程，從無到有搭建react腳手架（二） Css 安裝loader yarn add style-loader css...

    Sunxb 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<