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

Question

我已经从我的 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)
 }))
}});

Answer 1

简单的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));
  });