ReactJs, Express и Axios, отправьте запрос на сервер, а затем ответьте клиенту - PullRequest
Новая
       34

ReactJs, Express и Axios, отправьте запрос на сервер, а затем ответьте клиенту

0 голосов
/ 28 июня 2018

У меня вопрос, как отправить значение "params" на экспресс-сервер. Ответ от сервера клиенту не будет большой проблемой, потому что я сделал ответ. У меня проблема с отправкой данных на сервер.

это мой файл server.js 

const express = require('express');
const axios = require('axios');
const app = express();
const port = process.env.PORT || 5000;
const cors = require('cors');
var bodyParser = require('body-parser')
var urlencodedParser = bodyParser.urlencoded({ extended: false })
app.get('/category', (req, res) => {
   axios.get(`https://newsapi.org/v2/${params}&language=pl&sortBy=publishedAt&apiKey=API`)
  .then(response =>{
      let articles = [];
      response.data.articles.map((article) =>{
          articles.push(article);
      })
  res.send({ articles});
});
})
app.listen(port, () => console.log(`Listening on port ${port}`));

и вот мой app.js 

  //make api request
  setApiKey = params => {



   this.setState(
    {
      apiKey: api,
   },
   this.makeApiRequest, 
  );
   return api;
  }
  

  //set state after request
  makeApiRequest = () =>{
      axios.get('/category')
      .then(response => {
        this.setState({articles: response.data.articles});
      })
  }
 
 
  //set new  api on input chnage
  switchOnInputChange=(event)=>{
     if(event.target.value.length >3) {
        let params = `everything?q=${event.target.value}`
        this.setApiKey(params);
        this.setState({headerText: "Popularne"},
        this.makeApiRequest,
      )
       }
     if (event.target.value.length < 3){
       this.setState({
        apiKey: apiTop, 
        headerText: "Popularne"
      },
      this.makeApiRequest,);
    }
  }
 
scrollOnBtnClick = () =>{
  this.smoothScrollTo(0, window.outerHeight, 1500);
  this.toggleNav();
}
  //change api on click
  switchCatOnClick = (event) =>{    
    let text  = event.target.innerText;
    let params = `top-headlines?country=us&category=${event.target.getAttribute("switch")}`
    this.setApiKey(params);
    this.smoothScrollTo(0, window.outerHeight, 1500);
    this.setText(text);
  }

как вы можете видеть, я хочу передать параметры, которые создаются при нажатии или изменении ввода.

1 Ответ

0 голосов
/ 29 июня 2018

Рабочий раствор:

server.js 

app.get('/category',  (req, res) => {

   axios.get(`https://newsapi.org/v2/${req.query.path}?country=${req.query.country}&category=${req.query.category}&apiKey=API_KEY`)
  
  .then(response =>{
      let articles = [];
      response.data.articles.map((article) =>{
          articles.push(article);
      })
  res.send({ articles});
});
})

app.js 

 switchCatOnClick = (event) =>{
    let text  = event.target.innerText;
    let params = `path=top-headlines&country=pl&category=${event.target.getAttribute("switch")}`
    this.callApi(`/category?${params}`)
    .then(response => {
      this.setState({
        articles: response.articles
      });
    });
    this.smoothScrollTo(0, window.outerHeight, 1500);
    this.setText(text);
    this.scrollOnBtnClick();
    this.toggleNav
  }
...