如何解决提取返回SyntaxError:位置0的JSON中的意外令牌T
我正在尝试使用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
祝您愉快,编码愉快
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。