未处理的承诺拒绝:TypeError:网络请求失败的博览会节点后端 [英] Unhandled promise rejection: TypeError: Network request failed expo node backend

问题描述

我的Expo应用程序正在查询一个节点后端.node-express-mongo后端工作得非常完美，我可以使用Postman的GET Request进行验证，但是我的应用程序出现未处理的Promise拒绝网络失败错误

I have a node backend that my expo app is querying. The node-express-mongo backend works just perfect which I can verify using GET Request from Postman but I get unhandled promise rejection Network Failed error in my app

完全错误:

[Unhandled promise rejection: TypeError: Network request failed]
- node_modules/whatwg-fetch/dist/fetch.umd.js:473:29 in xhr.onerror
- node_modules/event-target-shim/dist/event-target-shim.js:818:39 in EventTarget.prototype.dispatchEvent
- node_modules/react-native/Libraries/Network/XMLHttpRequest.js:574:29 in setReadyState
- node_modules/react-native/Libraries/Network/XMLHttpRequest.js:388:25 in __didCompleteResponse
- node_modules/react-native/Libraries/vendor/emitter/EventEmitter.js:190:12 in emit
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:436:47 in __callFunction
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:111:26 in __guard$argument_0
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:384:10 in __guard
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:110:17 in __guard$argument_0
* [native code]:null in callFunctionReturnFlushedQueue

这是我的代码:

api.js

export const fetchMeetups = () =>
    fetch('http://localhost:3000/api/meetups')
        .then(res => res.json());

App.js

import * as React from 'react';
import { Platform, StyleSheet, Text, View, ActivityIndicator } from 'react-native';
import { fetchMeetups } from './constants/api'; 

const instructions = Platform.select({
  ios: `Press Cmd+R to reload,\nCmd+D or shake for dev menu`,
  android: `Double tap R on your keyboard to reload,\nShake or press menu button for dev menu`,
});


class App extends React.Component{
  static defaultProps = {
    fetchMeetups
  }

  state = {
    loading: false,
    meetups: []

  }

  async componentDidMount(){
    this.setState({loading: true});
    const data = await this.props.fetchMeetups();
    setTimeout(() => this.setState({loading: false, meetups: data.meetups}),2000)
  }


  render(){
    if(this.state.loading){
      return(
        <ActivityIndicator size="large"/>
      )
    }
    return (
      <View style={styles.container}>
        <Text>MeetupME</Text>
      </View>
    );
  }

}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

index.js

import { registerRootComponent } from 'expo';

import App from './App';

// registerRootComponent calls AppRegistry.registerComponent('main', () => App);
// It also ensures that whether you load the app in the Expo client or in a native build,
// the environment is set up appropriately
registerRootComponent(App);

-------------- UPDATE ------------------添加了一个catch块来获取&收到这个新错误

--------------UPDATE------------------ added a catch block to fetch & getting this new error

Network request failed
- node_modules/whatwg-fetch/dist/fetch.umd.js:473:29 in xhr.onerror
- node_modules/event-target-shim/dist/event-target-shim.js:818:39 in EventTarget.prototype.dispatchEvent
- node_modules/react-native/Libraries/Network/XMLHttpRequest.js:574:29 in setReadyState
- node_modules/react-native/Libraries/Network/XMLHttpRequest.js:388:25 in __didCompleteResponse
- node_modules/react-native/Libraries/vendor/emitter/EventEmitter.js:190:12 in emit
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:436:47 in __callFunction
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:111:26 in __guard$argument_0
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:384:10 in __guard
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:110:17 in __guard$argument_0
* [native code]:null in callFunctionReturnFlushedQueue

推荐答案

React-native Expo和Python Django后端存在相同的问题.问题是关于仿真器本地主机和服务器本地主机之间的冲突.您的后端服务器可能会在127.0.0.1:8000上运行，但是仿真器找不到它.

Had the same issue with React-native Expo and Python Django back-end. The problem is about a conflict between an emulator localhost and server localhost. Your back-end-server might be ruunning on 127.0.0.1:8000, but an emulator can't find this.

在终端中，使用命令"ipconfig"找到您的Ipv4-Address.例如，将为192.138.1.40

In terminal find your Ipv4-Address with a command 'ipconfig'. For ex., it will be 192.138.1.40

在此之后将其放入您的抓取中(' http://192.138.1.40:8000/').
而且重要的是-使用相同的主机和端口运行后端服务器.
例如在python Django上:

After this put it in your fetch ( 'http://192.138.1.40:8000/').
And what is also important - run your back-end-server with the same host and port.
On python Django for example:

py manage.py runserver 192.138.1.40:8000

py manage.py runserver 192.138.1.40:8000

在Django上，您还需要在settings.py中添加ALLOWED_HOSTS = ['192.138.1.40']

On Django you will also need to add ALLOWED_HOSTS = ['192.138.1.40'] in settings.py

这篇关于未处理的承诺拒绝:TypeError:网络请求失败的博览会节点后端的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！