I'm able to get the data in my js file but not in my .vue file

Question

I'm able to use fetch api (wanted to do the fetch api rather than axios) and call out my local api and console.log the data from my api.js file -

 export default {
     async getData(){
         await fetch(url+"campground")
        .then(result => result.json())
        .then(data => {
            console.log(data) // [{id:123,name:"Shimla"},{id:124,name:"Manali"}]
            return data
        })
    }
 }

The issue arises when I try to do it on my Catalogue.vue file.

<script>
      import api from '../api';
      export default {
        name: 'Catalogue',
        data() {
          return {
            camps: null
          }
        },
        methods: {
          
        },
        created() {
           this.camps = api.getData() 
           console.log(this.camps) //Promise { <state>: "pending" }
        },
      }
    
    </script>

The result that I get is usually

Promise { : "pending" }

How can I proceed from here? Thank You

Lawrence Cherone · Accepted Answer · 2020-10-12 13:27:11Z

2

You're not returning anything from getData and because fetch is async you don't need to put async/await on it.

Change to

export default {
    getData(){
        return fetch(url+"campground")
        .then(result => result.json())
    }
}

Then because its return value is a promise, you need to await it (as others have said)

async created() {
  try {
    this.camps = await api.getData() 
  } catch {
    this.camps = []
  }
},

or

created() {
  api.getData().then(result => this.camps = result).catch(e => this.camps = [])
},

btw, if camps ends up as an array from the result you should define it as an empty array in data not null.

edited Oct 12, 2020 at 13:27

answered Oct 12, 2020 at 13:22

Lawrence Cherone

46.7k7 gold badges66 silver badges107 bronze badges

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

3 Comments

Lawrence Cherone Over a year ago

I'll ignore url not being defined

Harish Pillarisetti Over a year ago

Thank you. Your solution worked! I need to return the fetch like you said.

Lawrence Cherone Over a year ago

np, glad it helped

Collectives™ on Stack Overflow

I'm able to get the data in my js file but not in my .vue file

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related