Promise returns Angular 8 ionic 4 中 ngOnInit 内的未定义值

Question

在我的 Ionic 4 angular 8 应用程序中，我使用 chrome return 选项卡 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

你可以这样尝试，这里我们使用了一个承诺，所以在从 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
    )};

Answer 2

选项 1：您可以为 ngOnInit 方法添加异步等待概念，如下所示，

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

方案二：可以在side then callback方法中加上if条件，就是这样，

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

chromeCall 必须 return 一个承诺 - 或者任何东西，真的，正如它所写的那样，它是 return 未定义的。 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

Promise returns Angular 8 ionic 4 中 ngOnInit 内的未定义值

Promise returns undefined value inside ngOnInit in Angular 8 ionic 4

promise

typescript

angular

ionic4

angular8