Print response from http GET request using axios in vue.js?

Question

When I access https://jsonplaceholder.typicode.com/todos?_limit=1 in my browser I get:

[
  {
    "userId": 1,
    "id": 1,
    "title": "delectus aut autem",
    "completed": false
  }
]

I am now trying store the result (and print) of a simple http GET request in a variable using axios in vue.js with the above URL:

  const result = axios.get('https://jsonplaceholder.typicode.com/todos?_limit=1');
  console.log("result is = " + result)
  console.log("result.title is = " + result.title)

But the above gives the below output:

App.vue?234e:59 result is = [object Promise]
App.vue?234e:60 result.title is = undefined

Is it not possible to print a json friendly result from a http get request (like with curl) without having to deal with promisesin vue.js?

UPDATE:

Based on below answers I have now tried the following in my App.vue file

<script>

import axios from 'axios';

export default {
  name: 'app',
  components: {
    AddTodo
  },
  data(){
    return {
      todos: []
    }
  },

  methods: {
    // not allowed to use function keyword here  
    async printJson(){
      let result = await axios.get('https://jsonplaceholder.typicode.com/todos?_limit=1');
      console.log("result is = " + result)
      console.log("result.title is = " + result.title)
    },    

    addTodo(newTodo) {
      this.printJson()  
    }
  }
}
</script>

But that just gives:

App.vue?234e:50 result is = [object Object]
App.vue?234e:51 result.title is = undefined

If you want to avoid chaining promises to keep a beautiful and readable code. You can take a look at async/await on JS. Even while doing requests directly with JS API, you will have to use callbacks or promises. It is asynchronous — Martin Paucot
– Martin Paucot, Commented Feb 5, 2020 at 15:56

Ilijanovic · Accepted Answer · 2020-02-05 16:01:19Z

1

Well thats not the way to do it...

Here are few ways to do it:

(async function(){
   const result = await axios.get('https://jsonplaceholder.typicode.com/todos?_limit=1');
   console.log("result is = " + result.data)
   console.log("result.title is = " + result.data.title)
})()

or the old way like this:

axios.get('https://jsonplaceholder.typicode.com/todos?_limit=1').then(function(result){
console.log("result is = " + result.data)
console.log("result.title is = " + result.data.title)
})

answered Feb 5, 2020 at 16:01

Ilijanovic

15k4 gold badges29 silver badges63 bronze badges

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

5 Comments

u123 Over a year ago

Ok but what if I want to store the result in a variable and print the content after the axios get call?

Ilijanovic Over a year ago

first you declare an variable for example var myData; and then you can set your result data to your myData like this: myData = result.data, now is your result stored in your variable. but be sure if you call the variable that you already fetched the data

u123 Over a year ago

Not sure what you mean can you provide a full example?

Xellos Over a year ago

You already store the result in a variable called "result". Maybe you should first explain what you want to do.

u123 Over a year ago

I want the variable to be available outside the async or promise scope. But looks like that is not possible.

Xellos · Accepted Answer · 2020-02-06 14:36:10Z

1

Yeah most of us do not want to deal with promises. Which is why the new JavaScript added async and await keywords.

function call(){
  return axios.get('https://jsonplaceholder.typicode.com/todos?_limit=1');
}

async function printJson(){
  let result = await call();
  console.log("result is = " + result)
  console.log("result.title is = " + result.title)
}

I pulled your call in a separate function to highlight the await better. I think it is not required (but cleaner in either case).

Technically there is still the promise, but you do not deal with it; Javascript does now. There is also a ton of information out there about async and await. As you can imagine, a lot of people want to get away from infinitely stacked callbacks.

UPDATE

I have run this through a fiddle now myself and the code works, once the access is adjusted to the structure of the returning JSON, which is an array of objects.

See this fiddle https://jsfiddle.net/xb2fck19/1/

Also you can put functions in the vue methods like this


<script>

import axios from 'axios';

//Version 1 - private function
function call(){
  return axios.get('https://jsonplaceholder.typicode.com/todos?_limit=1');
}

export default {
  name: 'app',
  components: {
    AddTodo
  },
  data(){
    return {
      todos: []
    }
  },

  methods: {
    // not allowed to use function keyword here  
    async printJson(){
      //make this.call(); if using version 2
      let result = await call();
      let data = result.data;
      console.log(data);
      for (let entry of data){
        console.log("result is = " + entry)
        console.log("result.title is = " + entry.title)
      }
    },   
    //Version 2 - public function
    call(){
      return axios.get('https://jsonplaceholder.typicode.com/todos?_limit=1');
    }
    addTodo(newTodo) {
      this.printJson()  
    }
  }
}
</script>

edited Feb 6, 2020 at 14:36

answered Feb 5, 2020 at 16:07

Xellos

871 silver badge7 bronze badges

4 Comments

u123 Over a year ago

That does not work, see my updated post - also the keyword 'function' is not allowed in the methods scope.

Xellos Over a year ago

It has been a while since I used axios. Your println says it is Object object now. Can you check if it has a data property below? Might just have to do result.data and result.data.title

Xellos Over a year ago

It does work, if you adjust the code to your JSON structure, which you failed to mention. If you do not tell us that you have an array of objects, of course result.data.title is undefined. Hence I asked you to check the properties...

u123 Over a year ago

In my original post you can see the full json blop I am trying to access. Using you example it works but it will require that I specify each "field" explicitly. I had hoped it was possible to just output the full blop like with curl but seems that not how axios is designed. +1 for also showing valid function keyword outside export scope.

Ajay Kumar · Accepted Answer · 2020-02-05 16:25:03Z

0

Axios returns Promise always so you can use then()

axios.get('https://jsonplaceholder.typicode.com/todos?_limit=1').then(response => { console.log(response); }

answered Feb 5, 2020 at 16:25

Ajay Kumar

976 bronze badges

1 Comment

u123 Over a year ago

But I want to store the result in a variable that I may or may not print to console after its as been assigned the response result

u123 · Accepted Answer · 2020-02-09 09:50:32Z

0

Found the answer based on:

Show json result with vue.js

actually very simply I just need to use JSON.stringify(data):

async printJson(){
  let result = await axios.get('https://jsonplaceholder.typicode.com/todos?_limit=1');
  let data = result.data
  let pretty =   JSON.stringify(data)
  console.log("Pretty = " + pretty)
},

which gives:

App.vue?234e:54 Pretty = [{"userId":1,"id":1,"title":"delectus aut autem","completed":false}]

answered Feb 9, 2020 at 9:50

u123

16.4k63 gold badges209 silver badges330 bronze badges

Collectives™ on Stack Overflow

Print response from http GET request using axios in vue.js?

4 Answers 4

5 Comments

4 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

5 Comments

4 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related