在 vue.js 中使用 axios 打印来自 http GET 请求的响应？

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 promises in 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

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

Answer 2

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>

Answer 3

Axios returns Promise always so you can use then()

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

Answer 4

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}]