日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

他來了，他來了，

新建ssl適用于網(wǎng)站、小程序/APP、API接口等需要進行數(shù)據(jù)傳輸應用場景，ssl證書未來市場廣闊！成為成都創(chuàng)新互聯(lián)的ssl證書銷售渠道，可以享受市場價格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：13518219792（備注：SSL證書合作）期待與您的合作！

他掉著頭發(fā)走來了。

大家好，我是前端開發(fā)者卜壯，經(jīng)過筆者上篇《俺咋能看懂公司前端項目?》之后，不知道大家有沒有學到其設計思想并應用到自己的項目中。我相信你們，肯定沒有。

趁著頭發(fā)茂密，讓我們步入正題!

今天的主角React，它作為當今社會的前端主流框架，在前端框架江湖中算是一哥的存在，憑借小巧高效靈活等特點，完成了眾多企業(yè)級的大項目，并且衍生了很多其他的框架，比如像跨平臺移動開發(fā)React Native，它的一套代碼可以運行在Android和iOS。然而這些都不是本篇文章的重點。

今天的重點是React或React Native如何高效管理調(diào)用后端接口，和上篇講到Vue管理后端接口一樣，它們有很多相似性，也有不同之處，因為我們知道它們開發(fā)模式和方法有些不同。

起初的想法，Vue有自己單獨的狀態(tài)管理器Vuex，React也可以用Redux來管理狀態(tài);Vue提供了混入(mixins)的開發(fā)方式，雖然React起初也有混入的功能，后來被舍棄掉了，但是React可以通過高階組件來實現(xiàn)混入的功能?；谶@些想法，該出手時就出手，風風火火參北斗啊。

后來，我終于學會了讓自己愛自己，搞錯了，我終于學會了Redux以及React-redux，學起來其實和Vuex一樣，只是有些概念不一樣。

Vuex里面有State定義狀態(tài)、Mutation修改狀態(tài)、Action支持異步調(diào)用Mutation修改狀態(tài)、Getter從State派生狀態(tài)。

而在Redux中主要有Reducer和Action，Reducer是一個純函數(shù)，根據(jù)不同的Action返回不同的狀態(tài)，Action則是用于改變狀態(tài)唯一途徑。但是僅靠Redux提供的功能只支持同步修改狀態(tài)，但是Redux有很多中間件，其中Redux-thunk就是一個支持異步的中間件，因為使用Redux管理請求需要異步支持，所以，I want you。

哆來咪發(fā)梭拉稀

又唱上了。

前面說了那么多都是湊字數(shù)，

下面開始我們的步驟。

首先先了解一下前端管理后臺接口的架構設計流程，技術選型后端要使用Swagger接口管理，前端React使用Redux狀態(tài)管理，React-redux狀態(tài)映射組件Props，Redux-thunk支持異步管理狀態(tài)，解析Swagger需要用到Handlebars模板編譯和fs文件解析。

1、引入swagger。

后臺接口服務器引入swagger。這一步就不多說了，你有我有全都有啊，誒嘿，誒嘿，參北斗啊。

2、解析swagger生成controller。

可以通過js寫一個腳本生成指定格式的js文件。swagger提供的v2/api-docs網(wǎng)址可以訪問接口的json。這個json是一個固定格式的字符串，包含tags數(shù)組和path對象。通過Handlebars模板編譯和fs文件解析生成以下格式的js文件，每個類對應一個文件。同時生成一個index.js入口文件，將所有的controller文件集中裝飾處理。

 
 
 

  
  
  
export default{     
  
  
  
  actions: {         
  
  
  
    findById : {             
  
  
  
      summary: '按主鍵查詢',             
  
  
  
      method: 'get',             
  
  
  
      url: (payload) => `/api/user/${payload.id}`,             
  
  
  
      parameters: [{'name':'id','in':'path','description':'id','required':true,'type':'string'}],        
  
  
  
    },    
  
  
  
  },} 
 
 
 

3、為每個controller文件生成對應的actions和reducers函數(shù)。

上述所說的入口文件index.js用來裝飾每一個controller，裝飾的內(nèi)容就是遍歷controller文件的actions對象，生成actions函數(shù)和reducers純函數(shù)。最后將生成的reducers交給redux管理，actions則為組件提供調(diào)用。actions函數(shù)里面有三步，包括請求前，請求中和請求后對狀態(tài)的處理。這三步是為了設置接口請求的loading狀態(tài)，通過loading狀態(tài)來處理頁面的加載效果，省去在組件中自定義的邏輯判斷。下圖為每個接口在action函數(shù)的數(shù)據(jù)處理。

生成action和reducer的代碼：

 
 
 

  
  
  
export default (name, controller) => {     
  
  
  
  const defaultState = (type) => ({//設置請求前的數(shù)據(jù)狀態(tài)，生成reducer時使用        
  
  
  
    type: type,         
  
  
  
    loading: false,         
  
  
  
    error: null,         
  
  
  
    request: null,         
  
  
  
    data: {},     
  
  
  
  })     
  
  
  
  const start_request = (type) => ({//設置開始請求的數(shù)據(jù)狀態(tài)        
  
  
  
    type: type,         
  
  
  
    loading: true,         
  
  
  
    error: null,         
  
  
  
    request: null,         
  
  
  
    data: {},     
  
  
  
  })     
  
  
  
  let actions = {}     
  
  
  
  let reducers = {}    //遍歷生成的controller文件的actions     
  
  
  
  _.forEach(_.keys(controller.actions), key => {         
  
  
  
    const action = controller.actions[key]         
  
  
  
    //生成action         
  
  
  
    actions[`${name}_${key}`] = (payload) => {             
  
  
  
      return async (dispatch) => {                 
  
  
  
        //設置開始請求的數(shù)據(jù)狀態(tài)                 
  
  
  
        dispatch(start_request(`${name}_${key}`))                 
  
  
  
        //開始網(wǎng)絡請求                
  
  
  
        let resp = {}                 
  
  
  
        try {                     
  
  
  
          resp = await ajaxUtil.myRequest(action, payload)                 
  
  
  
        } catch (e) {                     
  
  
  
          resp = e                }                 
  
  
  
        let handleResult = null                
  
  
  
        //數(shù)據(jù)處理，這里對resp.status狀態(tài)碼為400-500的錯誤處理，和200-300的成功數(shù)據(jù)處理                 
  
  
  
        if (!resp) {                     
  
  
  
          handleResult = {                         
  
  
  
            type: `${name}_${key}`,                        
  
  
  
            loading: false,                       
  
  
  
            error: '系統(tǒng)錯誤',                       
  
  
  
            data: null,                     
  
  
  
          }                
  
  
  
        } else if (resp.status >= 400 && resp.status < 500) {                     
  
  
  
          handleResult = {...}                 
  
  
  
                         } else if (resp.status >= 500) {                    
  
  
  
                           handleResult = {...}                 
  
  
  
                                          } else if (resp.status >= 200 && resp.status < 300) {                    
  
  
  
                                            handleResult = {                        
  
  
  
                                              type: `${name}_${key}`,                        
  
  
  
                                              loading: false,                        
  
  
  
                                              error: null,                        
  
  
  
                                              request: payload,                         
  
  
  
                                              data: resp.data,                     
  
  
  
                                            }                 
  
  
  
                                          }                 
  
  
  
                           //請求結(jié)束數(shù)據(jù)狀態(tài)處理                 
  
  
  
                           dispatch(handleResult)                 
  
  
  
                           return handleResult            
  
  
  
                         }         
  
  
  
        }         
  
  
  
        //生成reducer         
  
  
  
        reducers[`${name}_${key}`] = (state = defaultState(`${name}_${key}`), action) => {             
  
  
  
          if (action.type === `${name}_${key}`) {                 
  
  
  
            return {...state, ...action}             
  
  
  
          } else {                 
  
  
  
            return state             
  
  
  
          }         
  
  
  
        }     
  
  
  
      })     
  
  
  
      return {...actions, reducers} 
  
  
  
    } 
 
 
 

4、封裝高階組件，將接口請求狀態(tài)數(shù)據(jù)映射到組件的props中。

vuex里面有四個輔助函數(shù)這個react-redux要登場了。react-redux提供了一個connect，它是一個高階組件，接收 React 組件作為輸入，輸出一個新的 React 組件。高階組件讓代碼更具有復用性、邏輯性與抽象特征?？梢詫?render 方法作劫持，也可以控制 props 與 state。我們這里需要自己封裝一個高階組件，里面調(diào)用react-redux提供的connect函數(shù)將state和dispatch映射到組件的props,此外還需要定義兩個函數(shù)映射到props中，一個是用于調(diào)用接口的函數(shù)，另一個是獲取請求接口的loading狀態(tài)函數(shù)。最后返回一個新的組件。

高階組件封裝如下：

 
 
 

  
  
  
export default function connect(states = null, dispatches = null) {     
  
  
  
  return (WrappedComponent) => {         
  
  
  
    const mapStateToProps = state => {             
  
  
  
      //該函數(shù)用于獲取網(wǎng)絡請求的loading，用于組件顯示加載中的指示             
  
  
  
      const loading = (scope) => {                 
  
  
  
        return state[`${scope.controller}_${scope.method}`].loading             
  
  
  
      }            
  
  
  
      return states ? {...state, ...states(state), loading} : {...state, loading}         
  
  
  
    }         
  
  
  
    //集中處理請求發(fā)送的異常         
  
  
  
    const error = (cbData) => {             
  
  
  
      //判斷cbData.error，用來alert()提示用戶錯誤信息         
  
  
  
    }         
  
  
  
    const mapDispatchToProps = dispatchAsync => {             
  
  
  
      //該函數(shù)用于組件中發(fā)起網(wǎng)絡請求            
  
  
  
      const dispatch = async (scope, payload) => {                
  
  
  
        const controller = Controller[scope.controller]                 
  
  
  
        let cbData = await dispatchAsync(controller[`${scope.controller}_${scope.method}`](payload))                 
  
  
  
        error(cbData)                 
  
  
  
        return cbData             
  
  
  
      }             
  
  
  
      return dispatches ? {...dispatches(dispatchAsync), dispatch} : {dispatch}        
  
  
  
    }         
  
  
  
    //reduxConnect是react-redux提供的，原名稱是connect，我這里起了個別名，為了避免和我封裝的高階組件名沖突         
  
  
  
    //import {connect as reduxConnect} from 'react-redux'         
  
  
  
    const Root = reduxConnect(mapStateToProps, mapDispatchToProps)(WrappedComponent)         
  
  
  
    return class HOC extends React.Component {             
  
  
  
      render() {                
  
  
  
        return              
  
  
  
      }         
  
  
  
    }    
  
  
  
  }}? 
 
 
 

5、組件引用自定義的高階組件。

如果組件涉及到網(wǎng)絡請求，可以引入。引入之后像這樣：

export default connect(mapStateToProps, mapDispatchToProps)(Home)，其中Home是組件，mapStateToProps和mapDispatchToProps是想要指定映射哪些數(shù)據(jù)到props中，可以不傳。

然后就可以為所欲為了，發(fā)起網(wǎng)絡請求this.props.dispatch(IUserController.findById,{id})，返回值是請求后的數(shù)據(jù)。獲取請求狀態(tài)this.props.loading(IUserController.findById)，返回值是true或false。

上文我著重說的是react如何管理調(diào)用接口，其實react native設計是一模一樣的，大伙不妨試著設計一下。

許多事,

都是要經(jīng)過不斷嘗試才會成功的。

這篇內(nèi)容就到這里，我們下篇再見。

當前題目：俺好像看懂了公司前端代碼
網(wǎng)站路徑：http://m.5511xx.com/article/dhiddpd.html