Javascript async function returns [object Promise]

Question

Async function returns [object Promise] but desired behavior is returning real value. I can get the value from console.log.

I guess it is a expected behavior of the function but I have no idea to how to fix my code.

This is in vue.js code using electron-vue and NeDB.

<template>
  <div>
    {{ testNedb3('NDId6sekw6VYLmnc')  //this is a test by adding specific id }}
  </div>
</template>

<script>
import Promise from 'bluebird'
export default {
  methods: {
    dbFindAsync2: function (db, opt) {
      return new Promise(function (resolve, reject) {
        db.find(opt, function (err, doc) {
          if (err) {
            reject(err)
          } else {
            resolve(doc)
          }
        })
      })
    },
    testNedb3: async function (id) {
      const flattenMemAsync = function (arr) {
        return new Promise(function (resolve) {
          Array.prototype.concat.apply(
            [],
            arr.map(function (arr) {
              resolve(arr.members)
            })
          )
        })
      }
      const filterByNameIdAsnc = function (arr) {
        return new Promise(function (resolve) {
          const result = arr.filter(function (member) {
            return member.nameId === id
          })
          resolve(result)
        })
      }
      this.dbFindAsync2(
        this.$db, { 'members.nameId': id }, { 'members': 1, _id: 0 }
      ).then(function (res) {
        const docs = res
        flattenMemAsync(docs).then(function (res) {
          const flatMembers = res
          filterByNameIdAsnc(flatMembers).then(function (res) {
            console.log('result', res)
            console.log('result_firstname', res[0].firstName)
            return res
          })
        })
      })
    },

this.$db is getting data from NeDB and the data is two-dimensional array, so I am trying to flat the array by flattenMemAsync and remove unexpected data by filterByNameIdAsnc.

console.log('result', res) returns array and console.log('result_firstname', res[0].firstName) returns string.

I have changed calling code from {{ testNedb3('NDId6sekw6VYLmnc') }} to {{ {{ testNedb3('NDId6sekw6VYLmnc').then(value => {return value}) }} but the result is same.

Also changed to {{ await testNedb3('NDId6sekw6VYLmnc').then(value => {return value}) }} but I got error "Parsing error: Cannot use keyword 'await' outside an async function.".

Any comment can help me. Thank you.

tony19 · Accepted Answer · 2022-07-15 20:38:05Z

13

Don't call an async method within a view.

When you mark the method as async it will return a promise, so, its pointless to return a promise and mark it as async at same time.

You should await the async method or promise from created or some other suitable lifecycle hook and save the result in component’s data, then render that data.

Also, take a look at vue-promised plugin.

edited Jul 15, 2022 at 20:38

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Jun 8, 2019 at 22:28

filipe

2,0771 gold badge15 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Javascript async function returns [object Promise]

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related