When I make a GET request on Postman, it successfully makes the GET request:
当我在Postman上发出GET请求时,它成功发出了GET请求:
But when I do a GET fetch in ReactJS:
但是当我在ReactJS中进行GET提取时:
var data = {
'Content-Type': 'application/json',
'vin': 'TESTVIN1234567890'
}
var myInit = {
method: 'GET',
mode: 'no-cors',
header: data,
};
fetch('http://www.localhost:8080/ota/upload/config/', myInit)
.then(result=>result.json())
.then(body=>{
console.log(body)
});
I get the following error (with Uncaught SyntaxError pointing to the line : .then(result=>result.json())
):
我收到以下错误(Uncaught SyntaxError指向该行:.then(result => result.json())):
So I tested to see if fetch is correct with http://jsonplaceholder.typicode.com/posts and it fetches correctly.
所以我测试了http://jsonplaceholder.typicode.com/posts是否正确获取fetch并且它正确获取。
What could be the issue? Anything I am missing?
可能是什么问题?我错过了什么?
EDIT
I tried the following but got 'Network response was not ok.
and logged the following in EDIT 2:
我尝试了以下但得到'网络响应不好。并在编辑2中记录以下内容:
fetch('http://www.localhost:8080/ota/upload/config/', myInit).then(function(response) {
if(response.ok) {
response.blob().then(function(myBlob) {
var objectURL = URL.createObjectURL(myBlob);
console.log(objectURL)
});
} else {
console.log('Network response was not ok.');
}
})
.catch(function(error) {
console.log('There has been a problem with your fetch operation: ' + error.message);
});
EDIT 2 - ADDITIONAL INFO
编辑2 - 附加信息
2 个解决方案
#1
2
I'd recommend looking at the fetch
API documentation - but I have some general advice:
我建议查看fetch API文档 - 但我有一些一般建议:
1) I usually include error handling whenever fetching from an API, because you don't have enough information to know exaclty why the request failed. The docs have a decent example:
1)每当从API获取时,我通常都会包含错误处理,因为您没有足够的信息来了解请求失败的原因。文档有一个很好的例子:
fetch('flowers.jpg').then(function(response) {
if(response.ok) {
response.blob().then(function(myBlob) {
var objectURL = URL.createObjectURL(myBlob);
myImage.src = objectURL;
});
} else {
console.log('Network response was not ok.');
}
})
.catch(function(error) {
console.log('There has been a problem with your fetch operation: ' + error.message);
});
- This is an educated guess, but based on the limited information I gathered from the error message, you're using
HMR
- which does modify some code - specifically related to how state is propagated within components.
这是一个有根据的猜测,但基于我从错误消息中收集的有限信息,您正在使用HMR - 它确实修改了一些代码 - 特别与状态在组件内传播有关。
So first I'd rec. console logging the error.message
using the documentation as a guide (prob catch
) - and if you haven't solved the problem, then I think we need more context (like where is this inrelation to a component? how are you propagating the state? etc.)
所以首先我要记住。控制台使用文档作为指南记录error.message(prob catch) - 如果你还没有解决问题,那么我认为我们需要更多的上下文(比如这与组件有什么关系?你如何传播状态? ?等)
edit: or maybe it's just a typo - but still - error handling is good and there's a few 'gotchas' with using HMR
编辑:或者它可能只是一个错字 - 但仍然 - 错误处理是好的,使用HMR有一些'陷阱'
#2
-1
Probably =>
is not supported by the browser you're testing this on, even though Chrome supports it. You should replace your arrow functions with regular functions and see if everything works now.
你正在测试它的浏览器可能不支持=>,即使Chrome支持它。您应该用常规函数替换箭头函数,看看现在是否一切正常。
This is the list of browsers that support it:
这是支持它的浏览器列表:
If that's the case, you can use Babel and/or Webpack to transpile.
如果是这种情况,您可以使用Babel和/或Webpack进行转换。
#1
2
I'd recommend looking at the fetch
API documentation - but I have some general advice:
我建议查看fetch API文档 - 但我有一些一般建议:
1) I usually include error handling whenever fetching from an API, because you don't have enough information to know exaclty why the request failed. The docs have a decent example:
1)每当从API获取时,我通常都会包含错误处理,因为您没有足够的信息来了解请求失败的原因。文档有一个很好的例子:
fetch('flowers.jpg').then(function(response) {
if(response.ok) {
response.blob().then(function(myBlob) {
var objectURL = URL.createObjectURL(myBlob);
myImage.src = objectURL;
});
} else {
console.log('Network response was not ok.');
}
})
.catch(function(error) {
console.log('There has been a problem with your fetch operation: ' + error.message);
});
- This is an educated guess, but based on the limited information I gathered from the error message, you're using
HMR
- which does modify some code - specifically related to how state is propagated within components.
这是一个有根据的猜测,但基于我从错误消息中收集的有限信息,您正在使用HMR - 它确实修改了一些代码 - 特别与状态在组件内传播有关。
So first I'd rec. console logging the error.message
using the documentation as a guide (prob catch
) - and if you haven't solved the problem, then I think we need more context (like where is this inrelation to a component? how are you propagating the state? etc.)
所以首先我要记住。控制台使用文档作为指南记录error.message(prob catch) - 如果你还没有解决问题,那么我认为我们需要更多的上下文(比如这与组件有什么关系?你如何传播状态? ?等)
edit: or maybe it's just a typo - but still - error handling is good and there's a few 'gotchas' with using HMR
编辑:或者它可能只是一个错字 - 但仍然 - 错误处理是好的,使用HMR有一些'陷阱'
#2
-1
Probably =>
is not supported by the browser you're testing this on, even though Chrome supports it. You should replace your arrow functions with regular functions and see if everything works now.
你正在测试它的浏览器可能不支持=>,即使Chrome支持它。您应该用常规函数替换箭头函数,看看现在是否一切正常。
This is the list of browsers that support it:
这是支持它的浏览器列表:
If that's the case, you can use Babel and/or Webpack to transpile.
如果是这种情况,您可以使用Babel和/或Webpack进行转换。