Fetch，axios不要在Reactjs

Question

這裏是我的代碼和我在提取和axios唯一的問題是不工作。我需要添加一些插件的承諾或獲取inmy webpack.config.js實現嗎？如果我使用CDN的獲取，然後它工作fine.Please指導如何實現它的WebPack

var React=require('react'); 
var ReactDOM=require('react-dom'); 
var fetch=require('fetch'); 
var Header = React.createClass({ 
     getOccasion: function(evt) { 
      alert(evt.target.value) 
      fetch('/holidays/occasion', { 
       credentials: 'same-origin', 
       method: 'POST', 
       headers: { 
       'Content-Type': 'application/json' 
       }, 
       body: JSON.stringify({ 
       state: evt.target.value, 
      }) 
      }); 
      }, 
    render: function() { 
var state=this.props.holidays.state; 
var ButtonGroup = ReactBootstrap.ButtonGroup, 
Button = ReactBootstrap.Button; 
    return (
     <div> 
     <ButtonGroup> 
     <Button bsStyle="danger">Danger!</Button> 
    </ButtonGroup> 

     <select onChange={this.getOccasion}> 
     <option value="states">States</option> 
     { 
      this.props.holidays.map(function(holidays,i) { 
      return <option key={i} 
      value={holidays.state}>{holidays.state}</option>; 
     }) 
     } 
    </select> 




     </div> 
    ); 
    } 
}); 

更新：App.js

var React=require('react'); 
var ReactDOM=require('react-dom'); 
var Pusher=require('pusher-js'); 
var fetch = require('node-fetch'); 

var Header=require('./components/header.js'); 
var App = React.createClass({ 
    getInitialState: function() { 
    return { items: [], holidays: [] }; 
    }, 

    componentWillMount: function() { 
     alert("in mount") 

    this.pusher = new Pusher("ba34e3874d4b87905f36", { 
     encrypted: true, 
     cluster: 'ap2', 
    }); 
    this.channel = this.pusher.subscribe("doodles"); 
    this.total = 0; 
    alert("in pusher") 
    }, 

    componentDidMount: function() { 
     alert("in did") 


    fetch('/holidays',{credentials: 'same-origin',}).then(function(response) { 
     return response.json(); 
    }).then(this.getHolidaysSuccess); 

    }, 
    componentWillUnmount: function() { 
    // Unbind from channel events 
    this.channel.unbind(); 

    // Unsubscribe from the Pusher channel 
    this.pusher.unsubscribe(this.channel); 

    // Unregister by assign them to an empty function 
    this.getHolidaysSuccess = function() {}; 

    }, 


    getHolidaysSuccess: function(response) { 

     alert(JSON.stringify(response)) 

    this.setState({ 
     holidays: response 
    }); 
    }, 


    render: function() { 
     alert("in render1") 

    return (
     <div> 

<Header holidays={this.state.holidays} /> 

     </div> 
    ); 
    } 
}); 

ReactDOM.render(<App />, document.getElementById("app")); 

我webpack.config.js

var webpack = require('webpack'); 
module.exports = { 
    entry: './src/main/resources/static/js/app.js', 
    output: { 
    path: __dirname + '/src/main/resources/static/js', 
    filename: 'bundle.js' 
    }, 


    module: { 

    loaders: [ 
     { 
      test: /\.jsx?$/, 
      exclude: /node_modules/, 
      loader: 'babel-loader', 
     query: { 
      presets: ['es2015', 'react'] 
     } 
     } ] 
    }, 

     plugins: [ 
       new webpack.ProvidePlugin({ 
         Promise: 'imports-loader?this=>global!exports-loader?global.Promise!es6-promise', 
         fetch: 'imports-loader?this=>global!exports-loader?global.fetch!whatwg-fetch' 
       }) 
      ] 
}; 

Answer 1

您需要安裝和進口從node-fetch而不是fetch取像

npm install -S node-fetch 

，然後導入像

var fetch = require('node-fetch'); 

DOC