Question

我正在学习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）fire

有人可以帮忙吗？谢谢！

Answer 1

在快速代码中，您不会返回repsonse（您也会在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);
  })
})

Answer 2

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

res.json([response.data])

在ExpressJS方面。

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

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

2 个答案: