PromiseのAPIへの値渡しまたはアクセス

Question

私はReact Nativeアプリを作成していますが、機能を完成させる方法を理解できません。基本的にユーザーがログインすると、AsyncStorageを使用してアクセストークンの値を変数に保存していますが、その変数にアクセスしてヘッダーの一部としてAPIに送信する必要があります。

私は、ストレージにアクセスするためにgetItemを使用していますが、実際には文字列を期待しているためヘッダーの一部として渡すことができない約束を返しています。私はconsole.logに戻りますが、それはコンソールに文字列として表示されます。

したがって、主な問題は、Promiseに埋め込まれているaccess_tokenを含む文字列を要求するAPIであり、Bad Requestエラーが発生しているため、PromiseをAPIに渡すことができません。

「ユーザーの編集」ページのコードは、getToken（）およびuserUpdate（）関数が問題のある場所です。

'use strict' 
 

 
import React, {Component} from 'react'; 
 
import {AsyncStorage, Text, View, TouchableHighlight} from 'react-native'; 
 
import {Actions, ActionConst} from 'react-native-router-flux'; 
 
import t from 'tcomb-form-native'; 
 
import _ from 'lodash'; 
 
import EStyleSheet from 'react-native-extended-stylesheet'; 
 

 
import GlobalStyles from '../styles/GlobalStyles'; 
 

 
import Global from '../components/Global'; 
 
import ViewContainer from '../components/ViewContainer'; 
 
import StatusBarBackground from '../components/StatusBarBackground'; 
 

 
let Form = t.form.Form; 
 

 
var User = t.struct({ 
 
    email: t.String, 
 
    firstName: t.String, 
 
    lastName: t.String, 
 
}); 
 

 
const options = { 
 
    fields: { 
 
     email: { 
 
      autoCapitalize: 'none', 
 
      autoCorrect: false, 
 
      editable: false, 
 
     }, 
 
     mobilePhone: { 
 
      editable: false, 
 
     } 
 
    } 
 
}; 
 

 
EStyleSheet.build(GlobalStyles); 
 

 
class EditProfileScreen extends Component { 
 
    constructor(props) { 
 
     super(props); 
 
     this.state = { 
 
      selectedTab: "EditProfileScreen", 
 
      value: { 
 
       email: Global.email, 
 
       firstName: Global.firstName, 
 
       lastName: Global.lastName 
 
      } 
 
     }; 
 
    } 
 

 
    async _getToken(key) { 
 
     AsyncStorage.getItem(key, (err, result) => { 
 
      return result 
 
     }) 
 
    } 
 

 
    _userUpdate() { 
 
     var value = this.refs.form.getValue(); 
 
     var access_token = this._getToken(Global.ACCESS_TOKEN) 
 
     console.log(access_token) 
 
     if (value) { 
 
      fetch("https://test-integration.herokuapp.com/accounts/mine", { 
 
       method: "PUT", 
 
       headers: { 
 
        'Accept': 'application/json', 
 
        'Content-Type': 'application/json', 
 
        'Authorization': `Bearer ${access_token}` 
 
       }, 
 
       body: JSON.stringify({firstName: value.firstName, lastName: value.lastName}) 
 
      }).then((response) => response.json()).then((responseData) => { 
 
       if (responseData) { 
 
        console.log(responseData) 
 
       } else { 
 
        AlertIOS.alert("Login failed due to: " + responseData.message) 
 
       } 
 
      }) 
 
      .done() 
 
     } 
 
    } 
 

 
    render() { 
 
     return (
 
      <ViewContainer style={styles.viewContainer}> 
 
       <Text style={styles.title}> 
 
        Edit Profile 
 
       </Text> 
 
       <View> 
 
        <Form ref="form" type={User} options={options} value={this.state.value} /> 
 
       </View> 
 
       <View style={styles.row}> 
 
        <TouchableHighlight style={styles.button} onPress={this._userUpdate.bind(this)} underlayColor='#99d9f4'> 
 
         <Text style={styles.buttonText}>{_.capitalize('Confirm Edit')}</Text> 
 
        </TouchableHighlight> 
 
       </View> 
 
      </ViewContainer> 
 
     ); 
 
    } 
 
}; 
 

 
var styles = EStyleSheet.create({ 
 
    viewContainer: { 
 
     justifyContent: 'center', 
 
     padding: 20, 
 
     backgroundColor: '$white', 
 
    }, 
 

 
    title: { 
 
     fontFamily: '$ralewayThin', 
 
     color: '$primaryText', 
 
     fontSize: 30, 
 
     alignSelf: 'center', 
 
     marginBottom: 30 
 
    }, 
 

 
    buttonText: { 
 
     fontFamily: '$ralewayRegular', 
 
     fontSize: 18, 
 
     color: '$white', 
 
     alignSelf: 'center' 
 
    }, 
 
    button: { 
 
     height: 36, 
 
     backgroundColor: '$primaryTeal', 
 
     borderRadius: '$borderRadius', 
 
     marginBottom: 10, 
 
     marginLeft: 30, 
 
     marginRight: 30, 
 
     alignSelf: 'stretch', 
 
     justifyContent: 'center' 
 
    }, 
 

 
    row: { 
 
     marginTop: 20 
 
    } 
 
}); 
 

 
module.exports = EditProfileScreen;

任意のアイデアをいただければ幸いです！

Answer 1

awaitで約束を返さない場合は、_getTokenを非同期関数として定義する必要はありません。とにかく、最初にあなたは約束一つまたは他の方法を返す必要があります：

// async style 
async _getToken(key) { 
    return await AsyncStorage.getItem(key, (err, result) => { 
     return result; 
    }); 
} 
// or old style 
_getToken(key) { 
    return AsyncStorage.getItem(key, (err, result) => { 
     return result; 
    }); 
} 

をしかし、それは_userUpdateに到達したときに、非同期機能は本当に便利になります。残りの関数が実行される前に返されるトークンの値をasyncとawaitと宣言します。

async _userUpdate() { 
    var value = this.refs.form.getValue(); 
    var access_token = await this._getToken(Global.ACCESS_TOKEN) 
    console.log(access_token) 
    ... 
} 

これはトリックを行う必要があります。

async/awaitの仕組みをよりよく理解したい場合は、articleをご覧ください。