使用creat-react-app構建的專案，前後端的介面聯調，對於埠proxy設定、網路請求axios外掛的使用以及fetch 外掛的使用

1、proxy設定

    可以直接在package.json下配置，具體如下

"proxy": "域名"

2、axios外掛的使用

     使用npm下載外掛

npm install axiso --save

   axios的使用，其中header是預設application/json;charset=utf-8。

import React, { Component } from 'react';
import axios from 'axios';


class Test extends Component {
    constructor (props) {
        super(props)
    }

    getaxiosPost () {
        axios({
            method:'post',
            url:'/api/excel/web/list',
            data:{
                type:"import",
                page:1,
                pageSize:10
            },
            headers: {
                'Content-Type': 'application/json;charset=utf-8'
            }
        }).then(function(res){
           console.log(res.data);
        }).catch(function(error){
            console.log(error);
        });
    }

    getaxiosGet () {
        axios({
            method:'get',
            url:'/api/excel/web/status/disable/2',
            headers: {
                'Content-Type': 'application/json;charset=utf-8'
            }
        }).then(function(res){
            console.log(res.data);
        }).catch(function(error){
            console.log(error);
        });
    }

    render() {
        return (
            <div id="test-container">
                <p>search:{this.props.location.search} </p>
                <p>state:{this.props.location.state.mold} </p>
                <div onClick={this.getaxiosPost()}>axios的post請求</div>
                <div onClick={this.getaxiosGet()}>axios的get請求</div>
                <div onClick={() =>  this.props.history.goBack()}>返回上一頁</div>
            </div>
        );
    }
}
export default Test;
 

3、fetch 外掛的使用

     安裝 whatwg-fetch、es6-promise

npm install whatwg-fetch es6-promise  --save

  fetch程式碼的封裝：http.js

import 'whatwg-fetch'
import 'es6-promise'

//將json物件拼接成 key=val&key=val 的字串形式
function obj2params(obj) {
    var result = '';
    var item;
    for(item in obj){
        result += '&' + item + '=' +encodeURIComponent(obj[item]);
    }

    if(result) {
        result = result.slice(1);
    }
    return result;
}

export function postGpio(url,param) {
    var result = fetch(url, {
        method: 'post',
        mode:'cors',
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/x-www-form-urlencoded'
        },
        body: obj2params(param)
    });

    return result;
}

export function getGpio(url,param) {
    var result = fetch(url, {
        credentails: 'include',
        mode: "cors",
        header: {
            "Content-Type": "json"
        },
    });
    return result;
}
 

fetch使用，請求

import React, { Component } from 'react';
import {getGpio,postGpio} from "../http";


class Test extends Component {
    constructor (props) {
        super(props)
    }

    getFetchPost () {
        const result = postGpio('/api/excel/web/list',{
            type:"import",
            page:1,
            pageSize:10
        });

        result.then(res => {
            return res.json()
            console.log(res,19)
        }).then(json => {
            // get result
            const data = json
            console.log(data,22)
        }).catch(ex => {
            // 發生錯誤
            console.error('獲取資料出錯, ', ex.message)
        })
    }

    getFetchGet () {
        const result = getGpio('/api/excel/web/status/disable/2');

        result.then(res => {
            return res.json()
            console.log(res,19)
        }).then(json => {
            // get result
            const data = json
            console.log(data,22)
        }).catch(ex => {
            // 發生錯誤
            console.error('獲取資料出錯, ', ex.message)
        })
    }

    render() {
        return (
            <div id="test-container">
                <p>search:{this.props.location.search} </p>
                <p>state:{this.props.location.state.mold} </p>
                <div onClick={this.getFetchPost()}>axios的post請求</div>
                <div onClick={this.getFetchGet()}>axios的get請求</div>
                <div onClick={() =>  this.props.history.goBack()}>返回上一頁</div>
            </div>
        );
    }
}
export default Test;
 

參考文獻：1、https://blog.csdn.net/hopefullman/article/details/79106112

                  2、https://blog.csdn.net/qq_29854831/article/details/79456106