React Native 获取，意外令牌

Question

我正在尝试使用 fetch api 在 React Native 中调用一个简单的 REST 服务。我是运行 Android 上的应用程序。

当我调用 await response.json() 时，我得到

Unexpected token � in JSON at position 0

，我也尝试了 await response.text()，我得到的结果是：

��Mn�0��B�[C�bn�u��?@�+�bLR�ҌBR.� ��H�ծ�͛�#?>�g��t�%{��Z��؄u�>fs0]��H��'&��u�Z}��y�Z��2��i�d�G�>��R��6LL{j�j�7\��d��L.��gٲXv�Lf��g�%T�~�\z�U8E܀��ڭ�c��@[G�;�T��{�*�9�)��a½ ��0�组V:ϒ��/�K��3�ݝ��W: c�^UV@�B�7�@�v �+WG��@YL�|Ġ>q�=@�J}�3=��Q�]Հup^E�0 ^d'Ա �^��b�.��2,м��g2��R<��_rpV:!��<��^>��{�e�#7m��nA�;n��l�o�u��kW��r��

这是我正在使用的代码：

export function fetchMenu() {
  return async(dispatch) => {
    try {
      dispatch(menuRequest(true));
      console.log(Institucion.aplent);
      var response = await fetch('http://<page_url>/api/moviles/personalizacion', {
        compress: true,
        headers: {
          'aplentId' : Institucion.aplent,
          'Accept-Encoding' : 'gzip,deflate'
        }
      });
      console.log(response);
      if(!response.ok) throw Error(response.statusText);
      var data = await response.json();
      console.log('Data:', data);
      dispatch(menuSuccess(data));
    }
    catch(ex) {
      console.log(ex);
      dispatch(menuFailure(ex));
    }
  };
}

注意：出于安全原因，我已将 url 更改为，但我的代码中有正确的 url。

我试过使用和不使用 Accept-Encoding header，结果相同。

编辑

如果我在我的 REST API（在服务器上）中禁用 deflate 压缩，它工作正常，不获取支持 deflate 压缩？

Answer 1

将这些 headers 添加到提取调用中以确保您收到 JSON:

 'Content-Type': 'application/json',
  'Accept': 'application/json',

Answer 2

我建议在不显式设置压缩的情况下看看它是否有效。

如果你不设置Accept-encoding header，react native应该会自动压缩和解压它。所以可能让它处理它。而是尝试将其更改为 Accept header

export function fetchMenu() {
  return async(dispatch) => {
    try {
      dispatch(menuRequest(true));
      console.log(Institucion.aplent);
      var response = await fetch('http://<page_url>/api/moviles/personalizacion', {
        headers: {
          'aplentId' : Institucion.aplent,
          'Accept' : 'application/json'
        }
      });
      console.log(response);
      if(!response.ok) throw Error(response.statusText);
      var data = await response.json();
      console.log('Data:', data);
      dispatch(menuSuccess(data));
    }
    catch(ex) {
      console.log(ex);
      dispatch(menuFailure(ex));
    }
  };
}

Answer 3

这是服务器端的问题，我更改了api的压缩算法，效果很好

React Native 获取，意外令牌

React Native fetch, unexpected token

android

react-native

fetch-api