变量返回未定义甚至在 typescript 中异步分配 function

Question

Hi guys I was working on a Async Function and I want it to return a name that I get from some other API calls. My code are as below:

apiAccessor.ts

async registerName(): Promise<any>{
        try{
            await client.register((error, result) => {
                if(error){
                    console.error(`Error register name: ${error}`);
                }
                else{
                    console.log('Registered Successfully!');
                    this.assignedPlace = result.assignedPlace;
                    console.log(this.assignedPlace);
                }
            });
            return this.assignedPlace;
        }
        catch (error) {
            this.logger.error(error.name, error.message);
        }

main.ts

async function nameAssigner() {
    let place = await client.registerName();
    console.log(place);
}

nameAssigner();

The problem is, the console.log in main.ts will always run first (even if I put the console.log inside then promise callback) and giving me undefined value while after some time the code in apiAccessor.ts had finished, the console.log in apiAccessor.ts gave me the correct value I want. However this does not seems to be returned to the main.ts as expected.

How can I return the value or let the main.ts wait for the function to run complete first?

Thanks for the reads and appreciates if anyone could help!

Answer 1

Your problem is that client.register does not return a promise, it takes a call back function that is run internally but does not return a promise. You need to create a promise and resolve it in your callback function and then await the result from the promise.

async registerName(): Promise<any>{
    try{

         let promise = new Promise(function(resolve, reject) {
            client.register((error, result) => {
              if(error){
                reject(`Error register name: ${error}`);
              }
              else{
                console.log('Registered Successfully!');
                resolve(result.assignedPlace);
                console.log(this.assignedPlace);
              }
          });
        });
        this.assignedPlace = await promise;
        return this.assignedPlace;
    }
    catch (error) {
        this.logger.error(error.name, error.message);
    }

Answer 2

From your code it looks like client.register((error, result) => { uses a callback and is not returning a Promise. Therefore your await in front of it doesn't do what you think. You can wrap your call to client.resolve with a Promise and only resolve/reject it once the callback gives you the result.

return new Promise((resolve,reject) => {
  try {
    client.register((error, result) => {
      if(error){
        console.error(`Error register name: ${error}`);
        return reject(error);
      }
      else{
        console.log('Registered Successfully!');
        return resolve(result.assignedPlace); 
      }
    });
  }
  catch (error) {
    this.logger.error(error.name, error.message);
    return reject(error);
  }
});