GET请求适用于Postman,但为什么它不适用于ReactJS fetch?

时间:2022-10-07 17:43:12

When I make a GET request on Postman, it successfully makes the GET request:

当我在Postman上发出GET请求时,它成功发出了GET请求:

GET请求适用于Postman,但为什么它不适用于ReactJS fetch? 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())):

GET请求适用于Postman,但为什么它不适用于ReactJS fetch?

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 - 附加信息

GET请求适用于Postman,但为什么它不适用于ReactJS fetch?

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);
});
  1. 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.
  2. 这是一个有根据的猜测,但基于我从错误消息中收集的有限信息,您正在使用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:

这是支持它的浏览器列表:

GET请求适用于Postman,但为什么它不适用于ReactJS fetch?

source

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);
});
  1. 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.
  2. 这是一个有根据的猜测,但基于我从错误消息中收集的有限信息,您正在使用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:

这是支持它的浏览器列表:

GET请求适用于Postman,但为什么它不适用于ReactJS fetch?

source

If that's the case, you can use Babel and/or Webpack to transpile.

如果是这种情况,您可以使用Babel和/或Webpack进行转换。