提取返回SyntaxError：位置0的JSON中的意外令牌T

编程问答 2022-10-27

问题描述

我正在尝试使用Javascript提取方法，但是它似乎不能异步工作。

这是我的代码：

fetch(`${global.URL}${url}`,requestConfig)
  .then(res => res.json())
  .then(res => {
    console.log('response',res);
    return res;
  })
  .catch(error => {
    console.log('error: ',error)
  })

我有70％的时间遇到​​以下错误，然后又有30％的错误得到了有效的响应，当我保存文件并将其重新渲染时，有时可以正常工作。

error:  SyntaxError: Unexpected token T in JSON at position 0
    at parse (<anonymous>)
    at tryCallOne (core.js:37)
    at core.js:123
    at JSTimers.js:277
    at _callTimer (JSTimers.js:135)
    at _callImmediatesPass (JSTimers.js:183)
    at Object.callImmediates (JSTimers.js:446)
    at MessageQueue.__callImmediates (MessageQueue.js:396)
    at MessageQueue.js:144
    at MessageQueue.__guard (MessageQueue.js:373)

我尝试在内部和async / await函数中调用它，但是它没有帮助。

编辑1：

这就是我发出请求的方式

const authenticityToken = global.TOKEN

const query = (url,config) => {
  const requestConfig = {
    credentials: 'same-origin',...config,headers: {
      'X-Requested-With': 'XMLHttpRequest','Content-Type': 'application/json',Accept: 'application/json',Authorization: authenticityToken,},}

  return fetch(`${global.URL}${url}`,error)
  })
  // .then(handleResponseError)
}

export const get = (url,data) =>
  query(data ? `${url}?${stringify(data)}` : url)

export function fetchUser() {
  return (
    get('/api/v3/me/')
  )
}

然后我像这样调用组件内部的函数：

  const fetchUserAction = () => {
    fetchUser()
    .then((response) => {
      if(response) setUser(response.data)
    })
  }

  useEffect(() => {
    fetchUserAction()
  },[])

解决方法

这种错误通常在服务器返回非JSON时发生。以我的经验，服务器有99％的时间返回一般错误消息。通常，服务器会具有通用的“全部捕获”错误处理程序，该错误处理程序返回类似以下内容的内容：

There was an error processing your request.

在这种情况下，如果您尝试使用JSON.parse（或您的情况下为res.json()），则会得到您遇到的错误。要查看此内容，请将其粘贴到您的控制台中：

JSON.parse("There was an error processing your request.")
//-> Uncaught SyntaxError: Unexpected token T in JSON at position 0

解决方案1：通常，每当发生错误时，服务器都会设置适当的状态代码。解析前检查以确保响应状态为200：

fetch('...').then(res => {
  if (res.status !== 200) {
    throw new Error(`There was an error with status code ${res.status}`)
  }
  return res.json()
)

解决方案2：更新服务器代码以JSON格式返回错误消息。如果您使用的是节点表示，这看起来像这样：

function errorHandler (err,req,res,next) {
  if (res.headersSent) return next(err)

  const message = 'There was an error processing your request.'
  res.status(500)
  if (req.accepts('json')) {
    // The request contains the "Accept" header with the value "application/json"
    res.send({ error: message });
    return;
  }
  res.send(message);
}

然后，您将相应地更新前端代码：

fetch('...')
.then(res => res.json())
.then(res => {
  if (res.error) {
    throw new Error(res.error)
  }
  return res
)
,

当您尝试解析的字符串无法解析为JSON时，总是会发生这种错误Unexpected token T in JSON at position 0。此特定错误表示字符串以字符'T'开头，而不以'{'开头，因为可以解析为JSON的字符串应以开头。有一种非常严格的格式，允许您的字符串成为对象。 如果您在后端确保代码采用对象，将其字符串化并发送文本，则可能不是问题。如果您知道后端唯一可以发送的是字符串对象，那么那里可能就没错。

第二个更合理的答案是您的请求失败，我看到您准备了一个catch块，以防请求返回错误，但是那里存在问题。如果您说请求仅在某些情况下发生，则该请求可能由于多种原因而失败，这可能是CORS问题或后端的逻辑错误。在这种情况下，您希望查看响应本身，而不是已经解析的响应。本质上发生的是，当您的请求成功时，主体成功解析为一个对象，并且一切正常，但是当请求失败时，响应将是一个以T开头的异常，例如，当您尝试解析失败，因为它以T开头而不是JSON。您需要查看的是响应，然后将其解析为JSON，并且只有当它不是错误时，才应尝试对其进行解析。

代码中的问题是，您要做的第一件事就是尝试将其解析为JSON。我建议您注释掉这一行，并简单地将成功请求或失败请求打印为字符串。我敢肯定，您会发现在70％的时间内，您会看到期望的JSON字符串，而在其余30个字符串中，您将获得一个异常字符串（后端托管服务甚至会自动抛出该异常字符串，像超时异常一样，它们可能不会被视为错误，而是字符串。不幸的是，这在Firebase函数的免费计划中经常发生，该函数的运行时间限制为一定的秒数，您应该检查一下计划的说明在其网站上以T开头。这无疑会通过向您提供更多信息来帮助您找到问题所在。

另一方面，我热烈建议您停止使用then并继续使用，而是开始使用更为出色的async / await语法，该语法有助于使代码保持简单和井井有条。如果它与您要定位的所有引擎兼容，请阅读Mozilla文档，它非常简单：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function

祝您愉快，编码愉快

fetchfetch-apijavascriptreact-nativereactjsreactjs