Promise возвращает неопределенное значение внутри ngOnInit в Angular 8 ionic 4

Question

В моем приложении Ionic 4 angular 8 я использую расширение Chrome для возврата URL вкладки.Я получаю значение URL вкладки в функции, определенной в служебном файле, но при вызове службы внутри ngOnInit() получаю неопределенное значение.Пожалуйста, помогите мне решить эту проблему.

Я хочу, чтобы значение URL отображалось в ngOnInit()

Внутри служебного файла

async chromeCall() {
    try {          
      const results = await chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
        chrome.tabs.sendMessage(tabs[0].id, { from: 'popup', subject: 'DOMInfo' }, (response) => {
          console.info("Tab ID:", tabs[0].id);
          this.CurrentPgUrl = response.webPgURL;
          console.log(this.CurrentPgUrl);//geting value here
          return this.CurrentPgUrl;
        });
      });
    }
    catch (err) {
      console.log(err);
      console.log("comes to error ");          
    }
  }

Внутри ngOnit()

 ngOnInit(){
    this.apiService.chromeCall()
    .then(result => {
      this.url=result;
      console.log(this.url)//value undefined
 )};

Answer 1

chromeCall должен вернуть обещание - или что-нибудь, на самом деле, как написано, он возвращает неопределенное.chrome.tabs.query - это сборка с рецептом обратного вызова, а не с рецептом обещания, поэтому await не сделает ничего достойного внимания.

Это должно выглядеть примерно так:

chromeCall() {
    return new Promise(
        (resolve, reject) => chrome.tabs.query({ active: true, currentWindow: true }, tabs => {
// dive into the callback hell here, and on the final line...
            resolve(this.CurrentPgUrl);
        }
// and the appropriate number of closing `}`s

В качестве альтернативы, вы можете использовать библиотеку, которая обещает эти методы.Этот, например, выглядит так, как будто он справится с работой: https://www.npmjs.com/package/chrome-extension-async

Answer 2

вариант 1: вы можете поместить концепцию асинхронного ожидания для метода ngOnInit, как это,

async ngOnInit(){
    let serviceResponse = await this.apiService.chromeCall();
     if(serviceResponse){
       this.url=result;
     }
 }

вариант 2: вы можете добавить, если условие в сторону, тогда вызвать метод возврата, как это,

ngOnInit(){
    console.log('Loading start')
    this.apiService.chromeCall()
    .then(result =>{
        if(result){
            this.url=result;
            console.log('Loading ends')
            console.log(this.url)
            return
        }
        console.log('Loading ends')
    ).catch(err) => {
        console.log('Loading ends', err);
    }
};

Answer 3

вы можете попробовать вот так: здесь мы используем обещание, поэтому после получения ожидаемого результата на вкладках Chrome мы решаем обещание, поэтому вы не получите undefined.Я надеюсь, что это поможет вам.

async chromeCall() {
    try {

      const results = await chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
   return new Promise(resolve => {
          chrome.tabs.sendMessage(tabs[0].id, { from: 'popup', subject: 'DOMInfo' }, 
          (response) => {
             console.info("Tab ID:", tabs[0].id);
             this.CurrentPgUrl = response.webPgURL;
             console.log(this.CurrentPgUrl);//geting value here
             resolve (this.CurrentPgUrl);
        });
      });
   });     
    }
    catch (err) {
      console.log(err);
      console.log("comes to error ");

    }
  }

ngOnInit

 ngOnInit(){
    this.apiService.chromeCall()
    .then(result =>{
    this.url=result;
    console.log(this.url)//value undefined
    )};