Асинхронный метод JS не возвращает значение, выбранное из хэша

#javascript #reactjs #react-native

Вопрос:

Я пытаюсь получить значение из ответа JSON, а затем использовать его в запросе axios get. Я получаю искаженную строку вместо токена от объекта userData. Как мне вернуть токен через функцию и передать его обратно в строку axios? Проблема, похоже, связана с функцией возврата, которая не возвращает пользователя[‘маркер доступа’]

 componentDidMount() {
       // console.log("Hello Mounted UserProfile Card!"   this.getToken())

        axios
        .get(`http://127.0.0.1:3000/api/v1/user_profile/${this.getToken}`)
        .then(response => {
           this.setState({user: response.data});   
           console.log("api response "   response.data)  
        })
        .catch(function(error) {
            console.log(error);
        });
      }
    
      async getToken(user) {
        try {
          let userData = await AsyncStorage.getItem("userData");
          let data = JSON.parse(userData);
          let user = JSON.parse(data)
          return user["access-token"].toString();
        } catch(error) {
          console.log("Something went wrong", error);
        }
      }
 

Комментарии:

1. Поскольку вы передаете функцию вместо строки в свой get, вы не получите строку токена. Тем не менее, что-то кажется упущенным в том, как вы собираетесь это сделать. Я бы подумал, что идентификатор пользователя-это то, что вы передадите в URL, а затем получите его из параметров, да?

2. Вам нужно вызвать функцию и передать аргумент.

Ответ №1:

Вы переходите this.getToken к axios.get(...) , где this.getToken находится метод, возвращающий обещание, а не фактический токен.

Вы можете сначала разрешить getToken обещание, а затем вызвать axios запрос GET.

 componentDidMount() {
  this.getToken()
    .then(token => axios.get(`http://127.0.0.1:3000/api/v1/user_profile/${token}`))
    .then(response => {
      this.setState({ user: response.data });
      console.log(`API response: ${response.data}`);  
    })
    .catch(error => {
      console.error(error);
    });
}

async getToken() {
  const userData = await AsyncStorage.getItem("userData");
  const data = JSON.parse(userData);
  const user = JSON.parse(data)
  return user["access-token"].toString();
}
 

Ответ №2:

Этот код выглядит как неправильный. Метод getToken не вызывается, и в этом методе вы не используете пользователя param. Я не эксперт по реакциям, но я думаю, что это может быть работой;

    async componentDidMount() {
   // console.log("Hello Mounted UserProfile Card!"   this.getToken())
    try {
       const token = await this.getToken();
       if (token) {
           const response = await axios.get(`http://127.0.0.1:3000/api/v1/user_profile/${token}`);
           this.setState({user: response.data});   
           console.log("api response "   response.data)
       } else { throw 'token not found'; }
    } catch (ex) { console.log(ex); }
  }

  async getToken() {
    try {
      let userData = await AsyncStorage.getItem("userData");
      let data = JSON.parse(userData);
      let user = JSON.parse(data)
      return user["access-token"].toString();
    } catch(error) {
      console.log("Something went wrong", error);
      return null;
    }
  }