尝试从后端到前端获取API数据

时间:2019-06-24 08:03:46

标签: javascript reactjs typescript express

我已经从我的React前端创建了一个输入表单,并且已经能够使用fetch将这些数据发送到我的服务器。从这里,我可以在app.get()中访问它,并将表单数据传递到我的API函数中,最终当我控制台记录结果时,我得到了想要的结果。我现在的问题是,我正在努力寻找一种方法来使这些数据可以从前端访问。

我很想知道此时该怎么做,我以为如果我在api函数中执行了诸如response.send()之类的工作,可能会奏效,但没有成功。据我所知,当您获取数据时,可以通过POST请求将其发送到特定的端点,然后对该特定的端点执行get请求以将其取回,但是看来我无法在其中执行此操作这种情况。

//From my front end react page, the front end data is a form:
handleSubmit(event: any){
 event.preventDefault();
 let location: string = this.state.location
 fetch('/', {
   method: 'POST',
   headers: {
     'Content-type': 'application/x-www-form-urlencoded'
   },
   body: location
 })
}


//From my server file:
app.use('/', express.static(path.resolve('client', 'dist')));
app.get('/', (req: any, response:any) => {
let city = Object.keys(req.body)[0]
 if (city.match(/[a-zA-z]/g)){ 
 console.log('string')
  api.locationToCoords(city, (result:Object) => {
   console.log(result)
   //response.send()
  })
 } else {
 //Geolocation
 let x = city.split(',')
 api.retrieveData(x[0], x[1], ((results:any) => {
   console.log('~~~~~~~~~~~~~~~~~~~~~~~~~~~')
   console.log('results: ',results)
 }))
}});

1 个答案:

答案 0 :(得分:0)

简单的fetch就是这样,您可以使用它来在前端获取数据

fetch('your URL to fetch data', {
   method: 'POST',
   headers: {
        'Content-Type': 'application/json',
        // 'Content-Type': 'application/x-www-form-urlencoded',
   },
   body: formData //if any
})
  .then(function(response) {
    return response.json();
  })
  .then(function(myJson) {
    console.log(JSON.stringify(myJson));
  });