如何在 Javascript 中的 Class 之外返回 Promise 的值

Question

I have 2 classes. One that sets up a promise and another one that gets the result of the promise.

Food

export class Food  {
  constructor(initialSettings) {
    super(initialSettings);
    this.foodList = initialSettings.foodListInfo;
  } 

  getFoodListCodes() {
    return Promise.resolve(this.foodList.codes)
  }

  getFoodCode(code){
    return this.getFoodListCodes().then(response => {
     const theResponse = response;
     return theResponse[code]
    })
  }
}

If I were to add a debugger in the Food class, I'm able to confirm that a response is made:

Container

...
const codeValue = food.getFoodCode(1);

The problem is when I call it in the class above I get a pending promise .

I know the issue is coming from how I'm calling the getFoodCode method. Would I need to call an await in the Container class to get the response? Ideally I would like that to be contained in the Food class but I'm not sure if I'm doing it correctly.

Answer 1

Your function is returning a promise. It's not returning the value directly (though it appears you could return it directly).

The ONLY way for a caller to get a value out of that promise is with .then() or with await . Those are your two options.

Such as:

// this would have to be inside an async function
const codeValue = await food.getFoodCode(1);

or

food.getFoodCode(1).then(codeValue => {
     // use codeValue here
     console.log(codeValue);
});

Would I need to call an await in the Container class to get the response?

Yes. Or use .then() .

Ideally I would like that to be contained in the Food class but I'm not sure if I'm doing it correctly.

You can't. Once your operation is promise-based, there's no synchronous way to get the result out and directly return that value. The caller must use .then() or await to get the value out of the promise.

Answer 2

The promise approach:-

  getFoodCode(code){
    return this.getFoodListCodes().then(response => {
     const theResponse = response;
     return theResponse[code]
    })
  }

When you are returning from a promise, the result is wrapped inside a promise implicitly and so that's why you are getting a Promise object when calling the method on the object.

The async/await approach:-

  async getFoodCode(code){
    let theResponse = await this.getFoodListCodes();
    return theResponse[code]
  }

Here also the result is implicitly wrapped in a promise so the same result.

Your only way is that you do this operation either by using food.getFoodCode(1).then(.... or await food.getFoodCode(1); inside async function.

To move getFoodCode() outside your Food class you can do the following:-

const getFoodCode = function(code){
    return this.getFoodListCodes().then(response => {
     // do whatever with the response
    })
  }
getFoodCode.call(food,7);

The only difference is that now getFoodCode is not a property in Food.prototype but rather a function in global scope.

Answer 3

What I have understood is, you want that specific food object using that code.. and since it returns promise so you need to use.then()

You can also refer below article: https://dev.to/ramonak/javascript-how-to-access-the-return-value-of-a-promise-object-1bck

fiddle you can check here

JS:

class Food  {
  constructor(initialSettings) {
    this.foodList = initialSettings.foodListInfo;
  } 

  getFoodListCodes() {
    return Promise.resolve(this.foodList);
  }

  getFoodCode(code){
  return this.getFoodListCodes().then((response) => {
      return response[code];
    })
  }
}

var food = new Food({foodListInfo: {1: {name: 'food1'}, 2: {name: 'food2'}, 3: {name: 'food3'}, 4: {name: 'food4'}, 5: {name: 'food5'}}});

var div = document.getElementById('output');
food.getFoodCode(1).then((codeValue) => {
    console.log(codeValue);
    div.innerHTML = codeValue.name;
});