可能未处理的 Promise Rejection - React-Native 与 Firebase答案

【问题标题】：Possible Unhandled Promise Rejection - React-Native with Firebase可能未处理的 Promise Rejection - React-Native 与 Firebase
【发布时间】：2017-01-25 23:15:05
【问题描述】：

我正在尝试使用我的 React-Native 应用对新的 Firebase 实例进行 fetch API 调用，但我遇到了这个错误：

Possible Unhandled Promise Rejection (id: 0):
Network request failed
TypeError: Network request failed
    at XMLHttpRequest.xhr.onerror (http://localhost:8081/index.ios.bundle?platform=ios&dev=true&minify=false:25119:8)
    at XMLHttpRequest.dispatchEvent (http://localhost:8081/index.ios.bundle?platform=ios&dev=true&minify=false:10405:15)
    at XMLHttpRequest.setReadyState (http://localhost:8081/index.ios.bundle?platform=ios&dev=true&minify=false:26688:6)
    at XMLHttpRequest.__didCompleteResponse (http://localhost:8081/index.ios.bundle?platform=ios&dev=true&minify=false:26536:6)
    at http://localhost:8081/index.ios.bundle?platform=ios&dev=true&minify=false:26630:52
    at RCTDeviceEventEmitter.emit (http://localhost:8081/index.ios.bundle?platform=ios&dev=true&minify=false:9638:23)
    at MessageQueue.__callFunction (http://localhost:8081/index.ios.bundle?platform=ios&dev=true&minify=false:7493:34)
    at http://localhost:8081/index.ios.bundle?platform=ios&dev=true&minify=false:7375:8
    at guard (http://localhost:8081/index.ios.bundle?platform=ios&dev=true&minify=false:7306:1)
    at MessageQueue.callFunctionReturnFlushedQueue (http://localhost:8081/index.ios.bundle?platform=ios&dev=true&minify=false:7374:1)

函数如下所示：

 getNotes(username){
    username = username.toLowerCase().trim();
    var url = `https://myproject-6342.firebaseio.com/${username}.json`;
    return fetch(url).then((res) => res.json());
  },
  addNote(username, note){
    username = username.toLowerCase().trim();
    var url = `https://myproject-6342.firebaseio.com/${username}.json`;
    return fetch(url, {
      method: 'post',
      body: JSON.stringify(note)
    }).then((res) => res.json());
  }

这里出了什么问题？

【问题讨论】：

标签： javascript firebase react-native firebase-realtime-database

【解决方案1】：

在我的情况下，模拟器互联网无法正常工作，我按照以下线程进行操作。 Android emulator not able to access the internet

【讨论】：

【解决方案2】：

当发生网络错误时，来自 fetch API 的 Promise 会以 TypeError 拒绝，这意味着您必须处理该错误。示例：

function _handleError(errorMessage) {
  console.log(errorMessage);
}

fetch('https://api.github.com/users/octocat/repos').then(function(response) {
  if(response.ok) {
    return response.json();
  } else {
    _handleError(`Oops, something went wrong: ${response.status}, ${response.statusText}`);
  }
}).then(function(data) {
   if(data) {
     console.log('success', data);
   }
}).catch(function(error) {
  _handleError(`There has been a problem with your fetch operation: ${error.message}`);
});

【讨论】：