未处理的承诺拒绝：TypeError：网络请求在expo react native 中失败

Posted 2023-02-21

【中文标题】未处理的承诺拒绝：TypeError：网络请求在expo react native 中失败

【英文标题】：Unhandled promise rejection: TypeError: Network request failed in expo react native

【发布时间】：2021-06-25 05:17:51

【问题描述】：

我正在使用 expo 创建一个 MERN 反应本机移动应用程序，但我被困在如何使用 express 连接 REST API 上。下面是代码。

App.js

import React from "react";
import 
   StyleSheet,
   Text,
   View,
   TextInput,
   TouchableOpacity,
   SafeAreaView,
 from "react-native";

class Form extends React.Component 
   constructor() 
   super();
   this.State = 
      title: "",
      description: "",
   ;


getInput(text, field) 
   if (field == "title") 
      this.setState( title: text );
    else if (field == "description") 
     this.setState( description: text );
   
   //console.warn(text)
 
 submit() 
   let collection = ;
   (collection.title = this.state.title),
   (collection.description = this.state.description);
    console.warn(collection);
   var url = "http://localhost/3000";
   fetch(url, 
      method: "POST",
      headers: 
         Accept: "application/json",
         "Content-Type": "application/json",
      ,
      body: JSON.stringify(
      collection,
     ),
   );
 

 render() 
   return (
     <SafeAreaView style=styles.container>
     <TextInput
      underlineColorandroid="rgba(0,0,0,0)"
      placeholder="Title"
      selectionColor="#fff"
      keyboardType="default"
      onChangeText=(text) => this.getInput(text, "title")
     />

    <TextInput
      multiline=true
      numberOfLines=4
      underlineColorAndroid="rgba(0,0,0,0)"
      placeholder="Description"
      selectionColor="#fff"
      keyboardType="default"
      onChangeText=(text) => this.getInput(text, "description")
    />

    <TouchableOpacity onPress=() => this.submit()>
      <Text>Submit</Text>
    </TouchableOpacity>
  </SafeAreaView>
 );
 

export default Form;

Post.js

const mongoos = require("mongoose");

const PostSchema = mongoos.Schema(
   title: 
      type: String,
      required: true,
   ,
   description: 
      type: String,
      required: true,
   ,
   date: 
      type: Date,
      default: Date.now,
   ,
 );

 module.exports = mongoos.model("Post", PostSchema); // giving this schma name Post

posts.js

const express = require("express");
const router = express.Router();
const Post = require("./Post");

//Gets back all the posts
router.get("/", async (req, res) => 
   try 
      const post = await Post.find();
      res.json(post);
   catch (err) 
      res.json( message: err );
   
);

//To Submit the Post
router.post("/", async (req, res) => 
  //console.log(req.body);
  const post = new Post(
    title: req.body.title,
    description: req.body.description,
  );
  try 
    const savedPost = await post.save();
    res.json(savedPost);
   catch (err) 
    res.json( message: err );
  
);

//Get back specific Post
router.get("/:postId", async (req, res) => 
   try 
     const post = await Post.findById(req.params.postId);
     res.json(post);
      catch (err) 
       res.json( message: err );
   
);
// to delete specific post
router.delete("/:postId", async (req, res) => 
  try 
    const removePost = await Post.remove( _id: req.params.postId );
    res.json(removePost);
   catch (err) 
    res.json( message: err );
  
);

//update Post
router.patch("/:postId", async (req, res) => 
   try 
     const updatePost = await Post.updateOne(
        _id: req.params.postId ,
        $set:  title: req.body.title  
     );
     res.json(updatePost);
    catch (err) 
     res.json( message: err );
   
);

module.exports = router;

server.js**

const express = require("express");
const app = express();
const mongoos = require("mongoose");
const bodyParser = require("body-parser");
const postRoute = require("./posts");

const url = "mongodb://localhost/REST_API";

app.use(bodyParser.json());
app.use("/post", postRoute);

app.get("/", (req, res) => 
   res.send("We are on Home ");
);

// connecting to database
mongoos.connect(url,  useNewUrlParser: true );
const con = mongoos.connection;

con.on("open", () => 
   console.log("database connected,,,");
);

app.listen(3000);

以下是我运行时给出的错误。

[未处理的承诺拒绝：TypeError：网络请求失败] 在 setTimeout$argument_0 中的 node_modules\whatwg-fetch\dist\fetch.umd.js:535:17 在 node_modules\react-native\Libraries\Core\Timers\JSTimers.js:130:14 在 _callTimer 在 node_modules\react-native\Libraries\Core\Timers\JSTimers.js:383:16 在 callTimers 在 __callFunction 中的 node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:416:4 在 __guard$argument_0 中的 node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:109:6 在 __guard 中的 node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:364:10 在 node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:108:4 在 callFunctionReturnFlushedQueue at [native code]:null in callFunctionReturnFlushedQueue

【参考方案1】：

可能是模拟器/模拟器本地主机和服务器本地主机之间存在冲突，如下面链接的问题中所述。您可以尝试将App.js 中的url 变量更改为您的IP 地址。

Unhandled promise rejection: TypeError: Network request failed expo node backend

[Network error]: TypeError: Network request failed

【参考方案2】：

尝试更改 localhost 而不是使用 localhost 将其替换为 Ip 地址 解决了我的问题