Функция JavaScript (обратный вызов) .then (), обратный вызов выполняется после

Question

У меня проблемы с тем, чтобы заставить это работать.

У меня есть функция getItem:

export const getItem = async (key, callback) => {
    value = await Expo.SecureStore.getItemAsync(key).catch((error) => console.log(error));
    callback(value);
}

getItem, чтобы получить токен и передать его вобратный вызов.

Теперь я хочу использовать getItem в этом (упрощенном) классе:

export class Post {
    constructor(){
        this.token = false;
    }

    post() {
        console.log('Token: ' + this.token);
        ...
    }

    setToken(token){
        console.log('Set token.');
        this.token = token;
    }

    authorizedPost() {
        getItem('token', this.setToken.bind(this)).then(
            this.post()
        );
    }
}

Я использую этот класс следующим образом:

let post = new Post();
post.authorizedPost();

Этовывод я получаю:

Token: false
Set token.

Но мне нужно установить токен и после этого я хочу вызвать метод this.post();

Поскольку я новичок, яхочу извинить, если этот вопрос тривиален.Но я благодарен за любую помощь!

Answer 1

Я знаю, что вы на самом деле не спрашивали, но…

Одна из причин, по которой код трудно отлаживать, состоит в том, что вы используете обратные вызовы, когда вам не нужно, и смешиваете их с обещаниями.Это две разные асинхронные парадигмы, которые обычно лучше разделять.Вы можете избавиться от обратного вызова в своем коде таким образом, чтобы сделать его намного более читабельным.

 Expo.SecureStore.getItemAsync()

возвращает обещание, поэтому просто верните его.

const getItem = (key) => Expo.SecureStore.getItemAsync(key);

Затем в вашем методе вы можете вызвать then и просто вызвать функцию, которую вы передавали в качестве обратного вызова.Нет необходимости для обратного вызова или связывания.Всего одна строка за другой:

authorizedPost() {
  getItem('token').then(val => {
    this.setToken(val)           // the order is now obvious
    this.post()
  })
  .catch((error) => console.log(error))
}

Вот фрагмент кода с фальшивым Expo методом:

let Expo = {
  SecureStore: {
    getItemAsync() {
      return new Promise((resolve, reject) => setTimeout(() => resolve("someFancyToken"), 1000))
    }
  }
}

class Post {
  constructor() {
    this.token = false;
  }
  post() {
    console.log('Token: ' + this.token);
  }
  setToken(token) {
    console.log('Set token.');
    this.token = token;
  }
  authorizedPost() {
    getItem('token').then(val => {
        this.setToken(val)
        this.post()
      })
      .catch((error) => console.log(error))
  }
}

const getItem = (key) => Expo.SecureStore.getItemAsync(key);

let post = new Post();
post.authorizedPost();

Answer 2

Мне нужно было передать функцию, например, так:

authorizedPost() {
        getItem('token', this.setToken.bind(this)).then(
            ()=>this.post()
        );
    }