VueJS / ExpressJS（后端） - 从 API 获取数据答案

【问题标题】：VueJS / ExpressJS (Backend) - Getting data from an APIVueJS / ExpressJS（后端） - 从 API 获取数据
【发布时间】：2018-02-06 14:08:16
【问题描述】：

我正在学习 VueJS / Express，我正在尝试将来自外部 API 的数据显示到我的页面上。我使用 Express，因为 API 调用需要标头 + 我相信将其与 Vue 分开会更安全。

这是我的快递

app.get('/summoner', function(request, response) {
  axios.get('https://euw1.api.riotgames.com/lol/summoner/v3/summoners/by-name/XXXXXXXX', {headers: headers})
  .then(response => {
    console.log(response.data)
  })
  .catch(error => {
    console.log(error)
  })
})

这是我的 Vue 代码：

import axios from 'axios'

export default {
  name: 'summoner',
  data () {
    return {
      summoner: [],
      errors: []
    }
  },      
  created () {
    console.log('Created')
    axios.get('/api/summoner')
      .then(response => {
        console.log('Hit me')
        this.summoner = response.data
      })
      .catch(e => {
        this.errors.push(e)
        console.log(e)
      })
  }
}

console.log(response.data) 向我展示了我期望的对象：

{ id: XXXXXXXX,
  accountId: XXXXXXXX,
  name: 'XXXXXXXX',
  profileIconId: XXXXXXXX,
  revisionDate: XXXXXXXX,
  summonerLevel: XXXXXXXX }

console.log('Hit Me') 永远不会被触发 console.log('Created') 在页面加载时触发。

我似乎没有尝试使用 Vue 显示任何对象，例如：

{{ summoner.id }}

补充一下，我在 webpack 中配置了一个代理，它将以下请求转发给 Express。据我所知，每次刷新页面时，我都会看到 ExpressJS console.log(response.data) 触发

有人可以帮忙吗？谢谢！

【问题讨论】：

快递部分的response.send 在哪里？ expressjs.com/en/4x/api.html#res
我添加了 res.send(response.data) 这似乎仍然没有显示数据或记录 console.log('hit me') 语句。也没有使用 res.json([response.data])，尽管这确实允许我在访问 /api/summoner 时在 Chrome 中加载我的对象
所以在我的Vue axios调用中加入这个：this.summoner = response.data[0]终于在页面中显示了数据。有谁知道为什么我需要指定 0？然而，“Hit Me”仍然没有记录到控制台。

标签： express vue.js vuejs2 axios

【解决方案1】：

在您的快速代码中，您不会返回响应（您也在 axios 响应中覆盖）。尝试将其更改为

app.get('/summoner', function(request, res) { // <--- careful here is a change
  axios.get('https://euw1.api.riotgames.com/lol/summoner/v3/summoners/by-name/XXXXXXXX', {headers: headers})
  .then(response => {
    console.log(response.data)
    return res.status(200).send(response.data);
  })
  .catch(error => {
    console.log(error)
    return res.status(400).send(error);
  })
})

【讨论】：

【解决方案2】：

我实际上通过这样做解决了这个问题：

res.json([response.data])

在 ExpressJS 方面。

我还必须在 Vue 中使用 response.data[0]。

【讨论】：