Question

我的前端应用程序中有一个函数调用我的node.js后端服务器：

客户端功能：

  this.geocode = (placeName) => {
    const url = '/api/twitter/geocode?' + 'query=' + encodeURIComponent(placeName);
    return fetch(url)
      .then(processResponse)
      .catch(handleError)
  }


  // API Helper methods
  const processResponse = function (response) {
    if (response.ok) {
      console.log(response);
      return response.json()
    }
    throw response;
  }

  const handleError = function (error) {
    if (error.json) {
      error.json().then(error => {
        console.error('API Error:', error.message || error)
      })
    } else {
      console.error('API Error:', error.message || error)
    }
  }

服务器路由：

app.get('/api/twitter/geocode', (req, res) => {
  var parameters = {
    query: req.query.query
  }

  Twitter.get('geo/search', parameters)
    .then(response => {
      console.log("RESPONSE:")
      console.log(response);
      // check if there is a place for the given query
      if(response.date.places.length > 0){
       res.send(response.data.result.places[0].bounding_box.coordinates[0][0]);
      }
      res.send()
    })
    .catch(e => res.status(500).send('Something broke!')
    )
});

当placeName是不存在的地方的名称（或者至少是Twitter不知道的地方）时，会出现问题。后端的console.log(response)告诉我，对Twitter api的这样的请求会导致返回消息而没有位置数据：

 { data: 
    { result: { places: [] },
      query: 
       { url: 'https://api.twitter.com/1.1/geo/search.json?query=FOOBARTOWN',
         type: 'search',
         params: [Object] } },
   resp: 

/*etc...*/

如您所见，places是一个空列表。这个响应导致我的前端崩溃。我想知道为什么。查看错误消息：

   const handleError = function (error) {
     if (error.json) {
  >     error.json().then(error => {
         console.error('API Error:', error.message || error)
       })
     } else {

浏览器中的其他一些控制台输出：

GET http://localhost:3000/api/twitter/geocode?query=FOOBARTOWN 500 (Internal Server Error) (model.js:197)
Uncaught (in promise) SyntaxError: Unexpected token S in JSON at position 0
    at handleError (model.js:214)

好像我们正在error 500。但为什么？我的服务器没有失败。 node.js控制台中没有错误消息。

此外，似乎程序最终在handleError中，然后无法将错误转换为json。

为什么会出现handleError？错误是什么？
为什么说我的服务器出现故障（错误500）？
如何确保this.geocode收到空消息，我不会崩溃，并返回该空消息（这样我就可以检查空消息并在我的React.js组件中正确操作）？

Answer 1

为什么会出现handleError？错误是什么？

您的服务器正在发送500状态代码，Something broke!作为响应正文。

当您尝试在非JSON字符串上使用res.json()时，您会得到：

Uncaught SyntaxError: Unexpected token S in JSON at position 0

行if(error.json)没有按照您的想法行事。当handleError为false时，将调用response.ok，因为否则会抛出获取响应对象，在这种情况下，error参数将是实现{{3}的获取响应}，它有一个json方法，即使身体不是JSON，这是你的情况。

您的handleError可以这样写，您将处理fetch错误和非2xx回复。

const handleError = async function(error) {

  if(error instanceof Response) {

    if(error.headers.get('content-type').includes('application/json'))
      error = await error.json();
    else error = await error.text();

  }

  console.error('API Error:', error.message || error)
}

为什么说我的服务器出现故障（错误500）？

在console.log(e)上放置Twitter.get().catch，您就会发现。

您的Twitter.get().then也是错误的，因为您已经两次发送回复。

if(response.date.places.length > 0){
       res.send(response.data.result.places[0].bounding_box.coordinates[0][0]);
}
res.send()

应该是：

 if(response.date.places.length > 0)
   return res.send(response/*...*/);

 res.send()

如何处理来自服务器

1 个答案: