使用laravel后端API进行本机身份验证

时间:2020-04-02 11:24:28

标签: javascript react-native laravel-api

我是本机反应的新手。我目前尝试使用Laravel API设置react-native的登录名。我使用的API已经过测试及其工作。但是,当我尝试放入react-native时,它在我调用API时显示了错误。 模拟器中的警告是: 可能的未处理的承诺拒绝(id:0): TypeError:网络请求失败

这是我的代码。

import React, { Component } from 'react';
import {
    StyleSheet,
    View,
    TextInput,
    Text,
    TouchableOpacity,
    Alert,
    AsyncStorage,
} from 'react-native';
import {Actions} from 'react-native-router-flux';
import Logo from '../components/Logo';


export default class Login extends Component   {

    constructor(props) {
        super(props);
        this.state = {
            email: "",
            password: ""
        }
    };
    signup(){
        Actions.signup()
    }
    home(){
        Actions.home()
    }
    handleLogin = () => {
        fetch('http://localhost:8888/api/login',{
            method: 'POST',
            header:{
                'Accept': 'application/json',
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                email: this.state.email,
                password: this.state.password,
            })
        })
        .then((response) => response.json())
        .then((res) => {

            if (res.success === true){

                alert(res.message)

            }else{
                alert(res.message)
            }

           alert('test')
        })
    }
    render() {
        return (
            <View style={styles.container}>
                <Logo/>

                <View style={styles.inputContainer}>
                    <TextInput style={styles.inputBox}
                        underlineColorAndroid='0,0,0,0'
                        placeholder='Email'
                        placeholderTextColor= 'grey'
                        keyboardType= 'email-address'
                        onChangeText={(text) => this.setState({email:text})}
                        onSubmitEditing={()=> this.password.focus()}
                    />

                    <TextInput style={styles.inputBox}
                        underlineColorAndroid='0,0,0,0'
                        placeholder='Password'
                        placeholderTextColor= 'grey'
                        secureTextEntry= {true}
                        ref={(input) => this.password = input}
                        onChangeText={(text) => this.setState({password:text})}

                    />
                    <TouchableOpacity style={styles.button} onPress={this.handleLogin}>
                        <Text style={styles.buttonText}>Login</Text>
                    </TouchableOpacity>
                </View>  

                <View style={styles.signupText}>
                    <Text>Don't have an account? </Text>
                    <TouchableOpacity onPress={this.signup}>
                        <Text style={styles.signupButton}>Signup</Text>
                    </TouchableOpacity>
                </View>

            </View>
        );
    }

}

有人知道出什么问题吗?

1 个答案:

答案 0 :(得分:0)

可以通过设置adb并使用adb reverse命令解决问题。

示例

adb reverse tcp:8081 tcp:3333

compose