承诺回报价值

Question

I know this questions is asked several times in several ways. But I realy dont get it:

I have a promise with a resolved value. I can console.log this object and everything seems to be fine. I can see, what I want to see.

I use PouchDB and 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);
  });
}

This works great. My result is what I expect and hope to see:

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

Perfect. But now I am struggeling with returning this value, so other functions can access to it. Especially returning this data. In VueJS eg like that:

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

So I can access to it via instance. But ofcourse, If I do it like that, data is promise

data: [
   doc: promise
]

But I need the value, not what it is. I dont understand how to return the value.

I have read several How To´s. I guess, I understand the different between Callback and Promise. With both and async functions I get the same result. But all example are always with console.log(). But this works for me.

Has anyone an example hot to access this (scoped or nested?) value?

If I return the data:

let testdb = new PouchDB('testdb');

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

Why hasnt testDoc the value now? Or where the hack is the value?

I always have done it via commiting the value into the vuex store. This also works great.

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

But like I said, I want to have this data directly under control via IndexedDB

Answer 1

You can use async/await to wait until promise resolve:

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

---

UPD (by comments):

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

Answer 2

In the mount of the component you should update your state doc then your doc will be available to work with anywhere in your inside your component.

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

Answer 3

testDoc in your example now contains a function . Not a promise nor the doc you're getting from the promnise. To get the actual doc you need to get inside the promise . Like this

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);
});

Alternatively you can use the async/await syntax, like this

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