asyncData未显示接口结果

Question

我对制作自己的API和后端非常陌生。我已经设置了一个express服务器，它有一个对Salesforce的API调用，它返回(在终端中)：

{      
  attributes: {
    type: 'Opportunity',
    url: '/services/data/v42.0/sobjects/Opportunity/xxxxxxxxxxxx'
  },
  Id: 'xxxxxxxxxxxx',
  Name: 'United Oil Standby Generators',
  StageName: 'Closed Won'
}

但是，当我尝试使用asyncData从Nuxt内部调用API时，它什么也不返回。这是我的asyncData：

asyncData ({ params, error, $http }) {
  return $http
    .$get('/api/salesforce/' + params.id)
    .then((res) => {
        console.log('here we go')
        console.log(res.json)
      return { opp: res }
    })
    .catch((e) => {
      error({ statusCode: 404, message: 'User not found, ' + e })
    })
  
},

当我运行页面时，我的终端控制台会返回结果(因为我已经要求express服务器这样做了)，但是当我在Chrome上使用Vue工具或尝试访问数据时，Opp中没有任何内容。如果我返回res.json -它返回未定义的。它应该已经作为.json返回了，因为我已经在后端设置了它。

有没有人能看到我错在哪里了？就像我说的-我对使用我自己的API是个新手。

Answer 1

假设你使用动态_id.vue的/subjects/3路径，你可以使用下面的代码来访问这个模拟的API。

您可以使用以下命令将其显示在Nuxt端

<template>
  <div>
    {{ opp }}
  </div>
</template>

<script>
export default {
  async asyncData({ params, error, $http }) {
    try {
      const res = await $http.$get(
        `https://jsonplaceholder.typicode.com/todos/${params.id}`
      )
      console.log('here we go', res)
      return { opp: res }
    } catch (err) {
      error({ statusCode: 404, message: `User not found, ${err}` })
    }
  },
}
</script>

可以在此处找到可用的github存储库：https://github.com/kissu/so-nuxt-fetch

我不确定是不是有什么东西不能与你的API一起工作，但这至少是你在前端处理这个问题的方式。