可能的未处理承诺拒绝(id:1):TypeError:网络请求失败

Posted

技术标签:

【中文标题】可能的未处理承诺拒绝(id:1):TypeError:网络请求失败【英文标题】:Possible Unhandled Promise Rejection (id: 1): TypeError: Network re quest failed 【发布时间】:2020-07-12 22:51:37 【问题描述】:

我正在使用 react native verion >0.6 我正在使用 nodejs 在我的手机中运行我的应用程序 我有稳定的互联网连接 我正在制作一个注册页面,我想在其中上传照片并进行连接 它到firestore数据库

我的 App.js 代码:

import React from 'react';
import View,Text,StyleSheet,TextInput,TouchableOpacity,Image,ImageBackground,StatusBar,SafeAreaView from "react-native";
import * as firebase from 'firebase';
import  KeyboardAwareScrollView  from 'react-native-keyboard-aware-scroll-view';
import ImagePicker from 'react-native-image-crop-picker'
import Icons from "react-native-vector-icons/MaterialIcons"
import FireScreen from './FireScreen';

var firebaseConfig = ;
 require("firebase/firestore")
 export default class RegisterScreen extends React.Component 

static navigationOptions = 
    headerShown:false,
    headerColor:"#161F3D"
;

state=
    name:"",
    email:"",
    password:"",
    errorMessage: null,
    image:null,
    uri:""
;

handleSignUp = () => 
    firebase.auth().createUserWithEmailAndPassword(this.state.email,this.state.password)
    .then(userCredentials => 
        return userCredentials.user.updateProfile(
            displayName:this.state.name

        );
    )
    .catch(error => this.setState(errorMessage : error.message));
;

handlePost=() =>
    FireScreen.shared.addPost(localUri: this.state.image).then(ref =>
        this.setState(image:null)
        this.props.navigation.goBack()
    )
    .catch(error => alert(error);)

render() 
    return (

        <SafeAreaView style=styles.container>
    <StatusBar barStyle="light-content" backgroundColor="#161F3D" animated=true></StatusBar>
    <ImageBackground source=require('../assets/test.jpg') style=height:"100%",width:"100%">

    <KeyboardAwareScrollView>

        <TouchableOpacity style=styles.avatar onPress=() => 

            ImagePicker.openPicker(width: 500,height: 500,cropping: true,sortOrder: 'none',compressImageMaxWidth: 1000,compressImageMaxHeight: 1000, compressImageQuality: 1,compressVideoPreset: 'MediumQuality',includeExif: true,cropperCircleOverlay:true).then(image => 
            this.setState( image: uri: image.path, width: image.width, height: image.height, mime: image.mime,uri:image.path);
            ).catch(error => this.setState(errorMessage:error.message))
            
            >
            <Image style=styles.avatarPhoto source=isStatic:true,uri:this.state.uri/>
            <Icons name="add" size=40 color="#000" style=alignSelf:"center",marginTop:-85 />
            </TouchableOpacity>

             <Image source=require("../assets/logo.png") style=height:140,width:200,marginLeft:200,marginTop:-135></Image>

        <View style=styles.errorMessage>
            
              this.state.errorMessage && <Text style=styles.error>this.state.errorMessage</Text>
        </View>

        <View style=styles.form>



        <View style=marginTop:32>

             <TextInput style=styles.input 
                placeholder="Name"
                autoCapitalize="none" 
                underlineColorandroid="transparent"
                onChangeText=name => this.setState( name )
                value=this.state.name>
            </TextInput>
        </View>    


        <View style=marginTop:32>

             <TextInput style=styles.input 
             placeholder="Email ID"
                autoCapitalize="none" 
                onChangeText=email => this.setState( email )
                value=this.state.email>
            </TextInput>
        </View>

            <View style=marginTop:32>

                <TextInput style=styles.input 
                 placeholder="Password"
                 secureTextEntry
                 autoCapitalize="none"
                 maxLength=20

                 onChangeText=password => this.setState( password )
                 value=this.state.password
                 >

                 </TextInput>
            </View>




        </View>

        <TouchableOpacity style=styles.button onPress=this.handleSignUp>
            <Text style=color:"#FFF",fontWeight:"500">Sign Up</Text>
        </TouchableOpacity>

        <TouchableOpacity style=alignSelf:"center",marginTop:32
         onPress=() => 
        this.handlePost()
         //this.props.navigation.navigate("Login")
         >
            <Text 
            style=color:"#414959",fontSize:13,marginTop:30,fontWeight:"800",height:23,borderRadius:20,backgroundColor:"#FFF">
                Already Have An Account ? 
            <Text 

            style=fontWeight:"800",color:"#000",textDecorationStyle:"solid">  Sign In</Text></Text>

        </TouchableOpacity>

        </KeyboardAwareScrollView>
        </ImageBackground>
     </SafeAreaView>


    );

  

 const styles=StyleSheet.create(
   container: 
      flex:1,
      backgroundColor:"#FFF"
    ,
greeting:
    marginTop:70,
    fontSize:18,
    fontWeight:"500",
    textAlign:"center",
    textDecorationStyle:"solid",
    color:"#161F3D",
    borderStyle:"solid",


,
errorMessage:
    height:72,
    alignItems:"center",
    justifyContent:"center",
    marginHorizontal:30
,
error:
    color:"#E9446A",
    fontSize:13,
    fontWeight:"600",
    textAlign:"center"
,
form:

    marginTop:-50,
    marginBottom:50,
    marginHorizontal:40,    
,

input:
    alignItems:"center",
    marginTop:10,
    height:40,
    fontSize:15,
    borderColor:"#BAB7C3",
    borderWidth: StyleSheet.hairlineWidth,
    borderRadius:13,
    paddingHorizontal:16,
    color:"#514E5A",
    fontWeight:"600"
  ,
button:
    marginHorizontal:100,
    backgroundColor:"#161F3D",
    borderRadius:4,
    height:52,
    alignItems:"center",
    justifyContent:"center",
    borderTopEndRadius:10,
    borderBottomEndRadius:10,
    borderTopStartRadius:10,
    borderBottomStartRadius:10,


,

avatar:
    width:130,
    height:130,
    borderRadius:90,
    backgroundColor:"#E1E2E6",
    alignContent:"center",
    marginLeft:60,
    marginTop:100,
 ,
avatarPhoto:
    width:130,
    height:130,
    borderRadius:90,
    backgroundColor:"#E1E2E6",
    alignContent:"center",
    marginLeft:0,
    marginTop:0,

 );

我的 FireBase 代码:

我已成功将我的应用与 firebase 连接…… 我的应用和 Firebase 没有连接问题 我已经从firebase创建了一个云firestore数据库 数据库

import firebase from "firebase"
var firebaseConfig = 

 ;

class FireScreen 
constructor()
    firebase.initializeApp(firebaseConfig);


addPost = async (localUri )=>
    const remoteUri = await this.uploadPhotoAsync(localUri);
    return new Promise((res,rej)=> 
        this.firestore.collection("profilePics").add(
            uid:this.uid,
            image:remoteUri
        )
        .then(ref =>
            res(ref);
        )
        .catch(error =>
            rej(error);
        )
    )

uploadPhotoAsync = async uri => 
    const path = 'photos/$this.uid.jpg'
    return new Promise(async (res,rej)=>
        const response=await fetch(uri)
        const file =await response.blob()
        let upload = firebase.storage().ref(path).put(file)
        upload.on("state_changed", snapshot => ,err=>
            rej(err)
        ,
        async() =>
            const url = await upload.snapshot.ref.getDownloadURL()
            res(url);
        
        );
    );
;
get firestore() 
    return firebase.firestore();

get uid()
    return (firebase.auth().currentUser || ).uid




FireScreen.shared = new  FireScreen();
export default FireScreen;

我遇到这样的错误,请帮助我解决这个问题

 Possible Unhandled Promise Rejection (id: 2):
    TypeError: Network request failed
  onerror@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:28006:31
  @http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:34134:31
  setReadyState@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:33218:33
   __didCompleteResponse@http://localhost:8081/index.bundle?          platform=android&dev=true&minify=false:33045:29
  emit@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:3416:42
 __callFunction@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:2744:49
  http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:2466:31
  __guard@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:2698:15
 callFunctionReturnFlushedQueue@http://localhost:8081/index.bundle?           platform=android&dev=true&minify=false:2465:21
  callFunctionReturnFlushedQueue@[native code]

【问题讨论】:

【参考方案1】:

我看到的一件事是在uploadPhotoAsync 你有:

const path = 'photos/$this.uid.jpg'

但您需要法语口音 ` 而不是 '。像这样的:

const path = `photos/$this.uid.jpg` 这样,您将在 url 中获得 this.uid。

【讨论】:

谢谢您,先生,但我没有清除该错误【参考方案2】:

欢迎来到 ***!

关于您的情况,根据本文所述 - Making Promises safer in Node.js - 通常错误 Unhandled Promise Rejection (id: 2): 与缓冲区清理不当有关 - id 编号 2 表示 - 导致内存问题。考虑到您的错误的另一部分 - callFunctionReturnFlushedQueue@[native code] - 实际上,它可能与您的缓冲区未被清除有关。

除此之外,在您的const path = 'photos/$this.uid.jpg' 行中,句子末尾缺少; - 可能会影响您管理错误的trycatches

除此之外,在以前的版本中似乎有一个影响 Reactjs 的错误 - 你可以检查 Github 问题 here - 这不应该影响你的库,但检查它也可能很有用。

我还可以找到一些在使用 Android 时可能会影响您的 React 的问题。它们通常与您正在使用您的 catch 相关,并对其进行一些更改 - 您处理它们的方式,主要是 - 例如,在您的 catch 之后添加:throw error;,以便 catch 起作用错误 - 您可以从社区here 签入这个其他问题。

我建议您查看它们并确认这是否对您有帮助!

如果这些信息对您有帮助,请告诉我!

【讨论】:

谢谢您,先生,正如您所提到的“缓冲区清理不当 - id 编号 2 表示 - 导致内存问题”如何删除它? 嗨@belgin 有许多缓存/缓冲区可能会影响您的情况。考虑到您已经检查了我提到的其他几点,我建议您在Community Question 之后查看此内容,其中描述了如何清除它。除此之外,我强烈建议您检查我提供的其他信息。

以上是关于可能的未处理承诺拒绝(id:1):TypeError:网络请求失败的主要内容,如果未能解决你的问题,请参考以下文章

*可能的未处理承诺拒绝(id:0):类型错误:未定义不是对象(评估'result.cancelled')云图像上传

可能的未处理承诺拒绝(id:0):TypeError:适配器不是函数。 (在“适配器(配置)”中,“适配器”未定义)?

如何解决该错误>> WARN可能的未处理承诺拒绝(id:0):

如何修复可能的未处理承诺拒绝(id:0)?以及如何修复无法读取未定义的属性“导航”?

Axios 承诺处理 - 在 react-native 中获取“可能的未处理承诺拒绝 - 类型错误:网络请求失败”

可能未处理的承诺拒绝(id 0)反应原生