Return Value in Promise

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

Possible duplicate of: https://stackoverflow.com/questions/37533929/how-to-return-data-from-promise. You need to have two returns, one inside the promise function, and one for your testdb function. You can't get the value because you are not returning anything from your testdb function. Or better yet use async/await instead. — andrralv, Feb 07 '19 at 14:44

gleam · Answer 1 · 2019-02-07T14:50:42.700

3

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

edited Feb 07 '19 at 14:50

answered Feb 07 '19 at 14:36

gleam

861
6
12

1

nice way to use ```async/wait``` but i don't recommend this method it'will affect the mount of the component also you don't have much control on your errors also imagine if you want to add a loader of something before that ... – Aziz.G Feb 07 '19 at 14:46
1

oh... you are right! Nuxt-pages have asyncData, but components - not. I'll update an answer. – gleam Feb 07 '19 at 14:48
wow. woooooow. Thank you very much. This matches what I need. Ist now an Object I can access to. And yes, It is on nuxt-page, not in component. – equaliser Feb 07 '19 at 15:15

Aziz.G · Answer 2 · 2019-02-07T14:53:09.203

1

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

edited Feb 07 '19 at 14:53

answered Feb 07 '19 at 14:36

Aziz.G

3,599
2
17
35

score 0 · Answer 3 · answered Feb 07 '19 at 14:32

0

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

answered Feb 07 '19 at 14:32

molamk

4,076
1
13
22

ok, allright. But how can I access this `doc`from outside of that function? – equaliser Feb 07 '19 at 14:35
You either return the promise, or return it as a normal variable in the `await` example. Either way, to get it in another function, you need to do the same process. You call it either with `.then()` or with `async/await` – molamk Feb 07 '19 at 14:40

Return Value in Promise

3 Answers3