升级到 0.24.1 后反应本机获取 returns Blob 而不是 JSON

Question

你好，我最近升级到 0.24.1，但我在获取时遇到了问题。我遇到了与此 https://github.com/facebook/react-native/issues/6025 类似的问题，但 body init 返回的是一个 Blob，而不是像以前那样返回 JSON。我已经进行了更新，所以它现在使用 Accept & Content-Type 和 application/json 就像他们在上面的问题中所做的那样，但仍然没有运气。

return fetch(`${auth0_api}/userinfo`, {
  method: 'GET',
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json',
    'Authorization': `Bearer ${access_token}`
  }

当我 console.log 我得到的响应是：

{
  _bodyBlob: Blob
    size: 1144
    type: "application/json; charset=utf-8"
  _bodyInit:Blob
    size: 1144
    type: "application/json; charset=utf-8"
  headers: Headers
  ok: true
  status: 200
  statusText: undefined
  type: "default"
  url: ""https://lite.au.auth0.com/userinfo""
}

Answer 1

我可能应该在发布这个问题之前阅读 https://github.com/github/fetch...

需要在响应中使用 .json()。

return fetch(`${auth0_api}/userinfo`, {
  method: 'GET',
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json',
    'Authorization': `Bearer ${access_token}`
  }
})
.then((response) => {
  return response.json();
});

Answer 2

@kurupt_89的答案有效，但是从blob解析数据到json需要1秒多的时间，我觉得不应该是这样的。 github 上有一个问题描述了这个问题，也许你可以添加一些细节。 https://github.com/facebook/react-native/issues/8941

好的，我已经更改了 fetch.js(path:node_modules/react-native/Libraries/Fetch/fetch.js) 的第 419 行，来自

if ('responseType' in xhr && support.blob)

至

if ('responseType' in xhr && xhr.responseType && support.blob)

然后响应可以很容易地解析为Json

Answer 3

就我而言，我使用的是 cross-fetch，它导致了 json():

的问题

import fetch from "cross-fetch";

删除后帮助我转换为 json。

Answer 4

我已经 return 与 response.send 进行了交流（即使我已经尝试过 res.json(),res.text(), res.end, res.send(数据), res.json(数据), return 数据, return data.json(), res.end(数据), res.send(JSON.stringify(数据)), 每个组合...)

像下面的例子

    sendDashboardSigninUrl(req, res, next) {
        SecurityTokensService.sendDashboardSigninUrl(req)
            .then(data => {
                if(req.body.password == myPwd){
                    console.log("data:"+ JSON.stringify(data));
                    res.send(data); //code return from here with 200 ok
                }
                else
                {
                    console.log("error:");
                    throw new Exception("data Error");
                }               
            })
            .catch(next);
    }
}

每次说到前端都是这样：

> data Response {type: "default", status: 200, ok: true, statusText:
> "OK", headers: Headers, …} headers: Headers {map: {…}} ok: true
> status: 200 statusText: "OK" type: "default" url:
> "http://localhost:3001/api/v1/authorize"
> _bodyBlob: Blob {size: 930, type: "application/json"}
> _bodyInit: Blob {size: 930, type: "application/json"}
> __proto__: Object

但是在进一步调查之后我发现 json() 真的很有趣 这个前端成功了

Client.auth(settings.apiBaseUrl, this.state.email, this.state.password)
            .then(response => response.json()).then((data) => {
                var pureLink = data;
            })

Answer 5

获取库已更新，现在是：

fetch('/users')
.then(function(res){
    res.json().then(function(data) {
       console.log('request succeeded with JSON response', data)
    }).catch(function(error) {
       console.log('Data failed', error)
    });
}).catch(function(error){
     console.log('request failed', error)
})

Answer 6

.json returns 一个承诺，因此您可能需要在记录之前解决该问题：

fetch(`${auth0_api}/userinfo`, {
      method: 'GET'})
  .then((response) => response.json())
  .then(responseJSON => console.log('here you go:', responseJSON));
}

Answer 7

除了 json() 的其他答案，然后 return 承诺，我所做的不是将 header 提供给获取。尝试一下，在将 header 提供给 fetch 后我的问题就解决了。

升级到 0.24.1 后反应本机获取 returns Blob 而不是 JSON

react native fetch returns Blob instead of JSON after upgrading to 0.24.1

json

blob

fetch

react-native