Await 中的代码在 Expo App 中不是 运行

Question

我有下面的 expo react 应用程序代码，除了我最近添加的附加代码 - 'isLoggedIn' 结构之外，它按预期工作。我在其中添加了注释，即输出第一个 console.log，但是 'await' 中的部分似乎从来没有 运行。为什么是这样？我对代码的意图是检查安全存储中是否存在令牌，如果存在，它是否有效。如果是这样，请导航至 'ListsView'。它 运行 在模拟器上，但如上所述，不会 运行 等待中的代码。

import React, { Component, useState } from 'react';
import * as Font from 'expo-font';
import { StyleSheet, Text, View , Button, TextInput, Alert} from 'react-native';
import { AppLoading } from 'expo';
import { Formik } from 'formik';
import { globalStyles } from '../styles/global';
import * as SecureStore from 'expo-secure-store';

const getFonts = () => Font.loadAsync({
    'lobster': require('../assets/fonts/Lobster-Regular.ttf'),
    'nunito': require('../assets/fonts/Nunito-Regular.ttf')
    });

    
export default function LogInForm({ navigation }) {
    const [fontsLoaded ,setFontsLoaded] = useState(false);
    const goToLists  = () => {
      navigation.navigate('ListsView');
    }

    
 const isLoggedIn = () => {
     console.log("-------------");     **NOTE THIS IS TRIGGERED**
        (async () => {
            console.log("xxxxxxxxxx");     **THIS IS NEVER TRIGGERED**
          const token = await SecureStore.getItemAsync('token');
          // Your fetch code
          this.setState({loaded:false, error: null});
          let url = 'https://www.myWebsite.com/api/auth/isLoggedIn';
          let h = new Headers();
          h.append('Authorization', `Bearer ${token}`);
          h.append('Content-Type', 'application/json');
          h.append('X-Requested-With', 'XMLHttpRequest');    
          let req = new Request(url, {
           headers: h,
           method: 'GET'
          });
          fetch(req)
          .then(response=>response.json())
          .then(this.setState({token: isSet}));
          console.log(token);
          console.log("**************");
        })
       }
      
      
      

      
    
    if(fontsLoaded){
        isLoggedIn();  
        return(
            <View style={globalStyles.container}>    
            <View style={globalStyles.centering}>
            <Text style={globalStyles.titleText}>OurShoppingList</Text>
            <View style={globalStyles.logInScreen}>
                <Text style={globalStyles.headingText}>Log In</Text>
                <View>
                    <Formik
                        initialValues={{ email: '', password: ''}}
                        onSubmit={(values) => {
                            SecureStore.deleteItemAsync('token');
                            
                            fetch('https://www.myWebsite.com/api/auth/login', {
                                method: 'POST',
                                headers: {
                                    'Content-Type': 'application/json',
                                    'X-Requested-With': 'XMLHttpRequest',
                                },
                                body: JSON.stringify({
                                    email: values.email,
                                    password: values.password,
                                }),
                                })
                            .then(response => response.json())
                            .then(responseJson => {
                                console.log(responseJson)
                                if(responseJson.access_token){

    const setToken = async (token) => {
        await SecureStore.setItemAsync('token', responseJson.access_token);
    };
    setToken ();


                                navigation.navigate('ListsView');
                                } else {
                                    Alert.alert(responseJson.message);
                                }
                                
                            })
                            .catch(error => {
                            console.error(error);
                            alert(error.message);
                            });
                            if(SecureStore.getItemAsync('token')!='') {
                                goToLists;
                            }
                        }}
                    >
                        {(props) => (
                            <View>
                                <Text style={globalStyles.labelText}>Email Address:</Text>
                                
                                    <TextInput
                                    autoCompleteType="username"
                                    style={globalStyles.textInput}
                                
                                    onChangeText={props.handleChange('email')}
                                    value={props.values.email}
                                    />
                                
                                <Text style={globalStyles.labelText}>Password:</Text>
                                <TextInput secureTextEntry={true}
                                style={globalStyles.textInput}
                                onChangeText={props.handleChange('password')}
                                value={props.values.password}
                                />
                                <View style={globalStyles.buttons}>
                                    <Button title='submit' color='orange' onPress={props.handleSubmit} />
                                </View>
                            </View>
                        )}        
                    </Formik>
                    
                </View>
            </View>
            </View>
                <View style={globalStyles.login}>
                </View>           
            </View>
        )
} else {
    return (
      <AppLoading
        startAsync={getFonts}
        onFinish={() => setFontsLoaded(true)}
      />
    );
  }
}

Answer 1

以 (async () => { 开始并以 }) 结束的代码块创建了一个函数，但实际上并没有 运行 它。向其附加 () 将 运行 函数。

所以把它改成这样：

(async () => {
            console.log("xxxxxxxxxx");
             ...
             ...
        })()

注意最后的()，会触发函数调用

Answer 2

您指向的代码是一个功能块，在您调用它之前永远不会执行

const isLoggedIn = () => {
      console.log('-------------');
      (async () => {
        console.log('xxxxxxxxxx');
        const token = await SecureStore.getItemAsync('token');
        // Your fetch code
        this.setState({ loaded: false, error: null });
        const url = 'https://www.myWebsite.com/api/auth/isLoggedIn';
        const h = new Headers();
        h.append('Authorization', `Bearer ${token}`);
        h.append('Content-Type', 'application/json');
        h.append('X-Requested-With', 'XMLHttpRequest');
        const req = new Request(url, {
          headers: h,
          method: 'GET',
        });
        fetch(req)
          .then(response => response.json())
          .then(this.setState({ token: isSet }));
        console.log(token);
        console.log('**************');
      })(); // <<== those () will exec the code inside the fn-block
    };

或

const isLoggedIn = async () => {
  console.log('-------------');

  console.log('xxxxxxxxxx');
  const token = await SecureStore.getItemAsync('token');
  // Your fetch code
  this.setState({ loaded: false, error: null });
  const url = 'https://www.myWebsite.com/api/auth/isLoggedIn';
  const h = new Headers();
  h.append('Authorization', `Bearer ${token}`);
  h.append('Content-Type', 'application/json');
  h.append('X-Requested-With', 'XMLHttpRequest');
  const req = new Request(url, {
    headers: h,
    method: 'GET',
  });
  fetch(req)
    .then(response => response.json())
    .then(this.setState({ token: isSet }));
  console.log(token);
  console.log('**************');
};