前後端數據通信之FromData

所有向服務器提交的HTTP數據，其實都是一個表單

FromData是一種容器，用於模擬表單，向服務器提交數據，有兩種使用方法

• 創建空白FromData對象，然後向其中添加數據
• 將<from>標籤直接轉化爲一個FromData對象

使用FromData

註冊一個用戶：

async register(uName,uPwd){
    let fromData = new FormData();
    fromData.append('name',uName);
    fromData.append('pwd',uPwd);
    try {
      let res = await fetch('/api/adduser',{
        method:'POST',
        body:fromData
      })
  
      const {ok,err} = await res.json();
      if(ok){
        console.log('add user ok!')
      }else{
        console.log('add user fail!');
      }
    } catch (error) {
      console.log('error:',error)
    }
  }
  

上面的代碼就簡單介紹了FromData的第一種用法(創建對象的方式)，接下來針對fetch進行下簡單的封裝

封裝fetch

fetch.js

const BASEURL="http://localhost:3000/api"

export default async function(url,options){
    try {
        const res = await fetch(url,options);
        const {ok,error,data} = await res.json();
        if(ok){
            return data
        }else{
            console.error(error);
            throw new Error(error)
        }
    } catch (error) {
        throw error
    }
}

FromData+React+React-Redux結合使用

註冊用戶，並顯示用戶列表:

Reg.js

import React, { Component } from 'react';
import {connect} from 'react-redux'
import fetchJson from '../fetch'
import { from } from '[email protected]@rxjs';
class Reg extends Component {

    async submit(){
        // let fromData = new FormData();
        // fromData.append('name',this.refs.name.value);
        // fromData.append('pwd',this.refs.password.value);
        let fromData = new FormData(this.refs.from1);
        let data = await fetchJson('/api/adduser',{
            method:'POST',
            body:fromData
        })
        this.props.add_user({
            name:this.refs.name.value,
            pwd:this.refs.password.value
        })
        this.refs.name.value = "";
        this.refs.password.value = "";
    }

    render() {
        return (
            <div>
                <from ref="from1">
                    用戶:<input type="text" name="name" ref="name"/><br/>
                    密碼:<input type="password" name="password" ref="password"/><br/>
                    <input type="button" value="註冊" onClick={this.submit.bind(this)}/>
                </from>
            </div>
        );
    }   
}

export default connect((state,props) => Object.assign({},props,state),{
    add_user(user){
        return{
            type:'ADD_USERS',
            user
        }
    }
})(Reg);

Table.js

import React, { Component } from 'react';
import {connect} from 'react-redux'
import fetchJson from '../fetch'

class Table extends Component {
    constructor(){
        super();
    }
    async componentDidMount(){
        const data = await fetchJson('/api/userlist');
        this.props.init_users(data)
    }
    render() {
        return (
            <div>
                <table border="1" width="100%">
                  <thead>
                    <tr>
                        <th>用戶名</th>
                        <th>密碼</th>
                    </tr>
                  </thead>
                  <tbody>
                     {
                         this.props.users.map(({...item},index)=>(
                            <tr key={index}>
                                <td>{name}</td>
                                <td>{pwd}</td>
                            </tr>
                         ))
                     }
                  </tbody>  
                </table>
            </div>
        );
    }
}

export default connect((state,props) => Object.assign({},props,state),{
    init_users(users){
        return{
            type:'SET_USERS',
            users
        }
    }
})(Table);

App.js

import React, { Component } from 'react';
import Table from './components/Table'
import Reg from './components/Reg'
class App extends Component {
  render() {
    return (
      <div>
        <Reg/>
        <Table/>
      </div>
    );
  }
}

export default App;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import { async } from 'q';
import {Provider} from 'react-redux'
import store from './store'
ReactDOM.render(
    <Provider store={store}>
       <App />     
    </Provider>, 
    document.getElementById('root')
    );

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

store.js

import {createStore,combineReducers} from 'redux'

function users(state=[],action){
    switch(action.type){
        case 'SET_USERS':
            return action.users
        case 'ADD_USERS':
            return [
                ...state,
                action.user
            ]

        default:
            return state
    }
}

export default createStore(combineReducers({
    users
}))

總結：

• 使用FromData創建對象，並append的方式適合小量數據，並不易變的操作
• 使用from表單直接轉換成FromData的方式更加靈活，可控