【问题标题】:Return Value in PromisePromise 中的返回值
【发布时间】:2019-07-01 16:51:06
【问题描述】:

我知道这个问题以多种方式被问了好几次。但我真的不明白:

我有一个已解决值的承诺。我可以 console.log 这个对象,一切似乎都很好。我能看到,我想看到的。

我使用 PouchDB 和 NuxtJS (VueJS)

import PouchDB from 'pouchdb'

let testdb = new PouchDB('testdb');

let testDoc = function () {
  testdb.get('2').then(function (doc) {
    console.log(doc);
  }).catch(function (err) {
    console.log(err);
  });
}

这很好用。我的结果是我期望和希望看到的:

{
   text: "testen", 
   _id: "2", 
   _rev: "1-c7e7c73d264aa5e6ed6b5cc10df35c5a"
}

完美。但是现在我正在努力返回这个值,以便其他函数可以访问它。特别是返回这些数据。在 VueJS 中,例如:

// ..
export default {
   data() {
      return {
         doc: testDoc
      }
   }
}

所以我可以通过实例访问它。但是当然,如​​果我这样做,数据就是承诺

data: [
   doc: promise
]

但我需要的是价值,而不是价值。我不明白如何返回值。

我已经阅读了几本操作指南。我想,我理解 Callback 和 Promise 之间的区别。使用 async 和 async 函数,我得到相同的结果。但是所有的例子总是带有console.log()。但这对我有用。

有没有人可以访问此(范围或嵌套?)值的示例?

如果我返回数据:

let testdb = new PouchDB('testdb');

let testDoc = function () {
  testdb.get('2').then(function (doc) {
    return doc;
  }).catch(function (err) {
    console.log(err);
  });
}

为什么testDoc 现在没有价值了?或者 hack 的价值在哪里?

我总是通过将值提交到 vuex 存储来完成。这也很好用。

let fetchOrga = async function({ store }) {
  try {
    let orgaDoc = await orgadb.get('orga');
    store.commit('orgaUpdate', orgaDoc)
  } catch (err) {
    console.log(err);
  }
}

但就像我说的,我希望通过 IndexedDB 直接控制这些数据

【问题讨论】:

  • 可能重复:stackoverflow.com/questions/37533929/…。您需要有两个返回,一个在 promise 函数内,一个用于您的 testdb 函数。您无法获得该值,因为您没有从 testdb 函数返回任何内容。或者更好的是使用 async/await 代替。

标签: javascript vue.js promise


【解决方案1】:

您可以使用async/await 等待承诺解决:

// nuxt.js way
async asyncData() {
  let testdb = new PouchDB('testdb');
  return {
    doc: await testdb.get('2'),
  };
},

UPD(由 cmets):

data() {
  return {
    isReady: false,
    doc: null,
  };
},
async mounted() {
  let testdb = new PouchDB('testdb');
  this.doc = await testdb.get('2');
  this.isReady = true;
},

【讨论】:

  • 使用 async/wait 的好方法,但我不推荐这种方法,它会影响组件的安装,而且你对错误没有太多控制权也想象一下,如果你想添加之前的装载机...
  • 哦...你是对的! Nuxt 页面有 asyncData,但组件 - 没有。我会更新一个答案。
  • 哇。呜呜呜。非常感谢。这符合我的需要。现在是我可以访问的对象。是的,它在 nuxt-page 上,而不是在组件中。
【解决方案2】:

在组件的挂载中,您应该更新您的state doc,然后您的文档就可以在组件内部的任何位置使用。

export default {
  data() {
    return {
      doc: [],
      error : ""
    }
  },
  mounted: () => {
    testdb.get('2').then(doc => {
      this.doc = doc;
    }).catch(function(err) {
      this.error = err;
    });
  }
} 

【讨论】:

    【解决方案3】:

    testDoc 在您的示例中现在包含一个函数。不是承诺,也不是你从承诺中得到的doc。要获得实际的doc,您需要进入promise。像这样

    let testdb = new PouchDB('testdb');
    
    testdb.get('2').then(function (doc) {
    
        // Your doc is here
        console.log(doc);
        return doc;
    }).catch(function (err) {
        console.log(err);
    });
    

    您也可以使用async/await 语法,像这样

    let doc = await testdb.get('2');
    // Your doc is here
    console.log(doc);
    

    【讨论】:

    • 好的,好的。但是我怎样才能从那个函数之外访问这个doc呢?
    • 您要么返回承诺,要么将其作为await 示例中的普通变量返回。无论哪种方式,要在另一个函数中使用它,您都需要执行相同的过程。您可以使用.then()async/await 调用它
    猜你喜欢
    • 1970-01-01
    • 2018-01-20
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2018-03-10
    • 1970-01-01
    • 1970-01-01
    • 2015-03-04
    相关资源
    最近更新 更多