Fetch, Axios nicht woking in Reactjs

Question

Hier ist mein Code und mein einziges Problem in Fetch und Axios funktionieren nicht.Ich brauche ich einige Plugins für versprechen oder fetch inmy webpack.config.js zu erreichen, so dass? Wenn ich benutze CDN für holen dann funktioniert es fine.Please zu führen, wie es

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> 
    ); 
    } 
}); 

-Update in webpack zu implementieren: 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")); 

mein 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

Sie müssen installieren und Import von node-fetch statt fetch wie

npm install -S node-fetch 

holen und dann wie

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

DOC