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

【问题标题】：Print response from http GET request using axios in vue.js?在 vue.js 中使用 axios 打印来自 http GET 请求的响应？
【发布时间】：2020-05-21 13:58:16
【问题描述】：

当我在浏览器中访问 https://jsonplaceholder.typicode.com/todos?_limit=1 时，我得到：

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

我现在正在尝试使用带有上述 URL 的 vue.js 中的 axios 将简单的 http GET 请求的结果（和打印）存储在一个变量中：

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

但上面给出了以下输出：

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

是否可以在不处理 promisesin vue.js 的情况下从 http get 请求（如 curl）打印 json 友好的结果？

更新：

根据以下答案，我现在在 App.vue 文件中尝试了以下操作

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

但这只是给出：

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

【问题讨论】：

如果你想避免链接承诺保持美观和可读的代码。你可以看看 JS 上的 async/await。即使直接使用 JS API 进行请求，您也必须使用回调或承诺。它是异步的

标签： javascript vue.js axios

【解决方案1】：

这不是办法……

这里有几种方法：

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

或者像这样的旧方法：

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

【讨论】：

好的，但是如果我想将结果存储在一个变量中并在 axios 调用后打印内容呢？
首先您声明一个变量，例如var myData;，然后您可以将结果数据设置为您的myData，如下所示：myData = result.data，现在您的结果存储在您的变量中。但请确保您是否调用了已获取数据的变量
不确定你的意思，你能提供一个完整的例子吗？
您已经将结果存储在名为“result”的变量中。也许你应该先说明你想做什么。
我希望变量在异步或承诺范围之外可用。但看起来那是不可能的。

【解决方案2】：

是的，我们大多数人都不想处理承诺。这就是为什么新的 JavaScript 添加了 async 和 await 关键字的原因。

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

我在一个单独的函数中取消了您的呼叫，以更好地突出等待。我认为这不是必需的（但无论哪种情况都更干净）。

从技术上讲，承诺仍然存在，但您不处理它； Javascript 现在可以。还有大量关于 async 和 await 的信息。可以想象，很多人都想摆脱无限堆叠的回调。

更新

我现在自己通过小提琴运行了这个并且代码工作，一旦访问被调整为返回 JSON 的结构，它是一个对象数组。

看这个小提琴https://jsfiddle.net/xb2fck19/1/

你也可以像这样将函数放在 vue 方法中


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

【讨论】：

这不起作用，请参阅我更新的帖子-方法范围内也不允许使用关键字'function'。
好久没用axios了。你的 println 说它现在是 Object 对象。你能检查它是否有下面的数据属性吗？可能只需要做 result.data 和 result.data.title
它确实有效，如果您将代码调整为您没有提及的 JSON 结构。如果你不告诉我们你有一个对象数组，那么 result.data.title 当然是未定义的。因此，我要求您检查属性...
在我的原始帖子中，您可以看到我尝试访问的完整 json blop。使用您的示例它可以工作，但它需要我明确指定每个“字段”。我曾希望可以像 curl 一样输出完整的 blop，但似乎不是 axios 的设计方式。 +1 用于在导出范围之外显示有效的函数关键字。

【解决方案3】：

Axios 总是返回 Promise，所以你可以使用 then()

axios.get('https://jsonplaceholder.typicode.com/todos?_limit=1').then(响应 => { 控制台日志（响应）； }

【讨论】：

但我想将结果存储在一个变量中，我可能会或可能不会在分配响应结果后打印到控制台

【解决方案4】：

根据以下内容找到答案：

Show json result with vue.js

其实很简单我只需要使用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)
},

给出：

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

【讨论】：