ReactJs、Express 和 Axios，向服务器发送请求，然后响应客户端答案

【问题标题】：ReactJs, Express and Axios, send request to server then respond to clientReactJs、Express 和 Axios，向服务器发送请求，然后响应客户端
【发布时间】：2018-06-28 11:15:18
【问题描述】：

我有一个问题，如何将“参数”值发送到快递服务器。从服务器到客户端的响应不会是一个大问题，因为我做了响应。我在向服务器发送数据时遇到问题。

这是我的 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);
  }

如您所见，我想传递在单击或输入更改时创建的参数。

【问题讨论】：

你遇到了什么错误？
createError.js:16 Uncaught (in promise) 错误：在 XMLHttpRequest.handleLoad (xhr) 解决 (settle.js:18) 时的 createError (createError.js:16) 请求失败，状态码为 500 .js:77)
服务器在 5000 上运行并在 3000 上响应应用 GET localhost:3000/category500（内部服务器错误）
所以问题出在服务器上——你遇到了什么错误？
问题是我没有将 {params} 传递给服务器需要知道如何将硬编码的参数从应用程序传递到服务器“ReferenceError: params is not defined”

标签： reactjs express post get request

【解决方案1】：

工作解决方案：

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
  }

【讨论】：