asyncData не отображает результаты API

#nuxt.js

Вопрос:

Я совсем новичок в создании собственного API и бэкенда. Я настроил экспресс-сервер, на котором есть вызов API для Salesforce, который возвращает (в терминале):

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

Однако, когда я пытаюсь вызвать API изнутри Nuxt с помощью asyncData, он ничего не возвращает.
Вот мои данные 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 })
    })
  
},
 

Когда я запускаю страницу, моя консоль терминала возвращает результаты (так как я попросил экспресс-сервер сделать это), но когда я использую инструменты Vue в Chrome или пытаюсь получить доступ к данным, в Opp ничего нет. Если я верну res.json — он вернется как неопределенный. Он уже должен возвращаться как .json, так как я установил его в бэкэнде.

Может ли кто-нибудь увидеть, где я здесь ошибаюсь? Как я уже сказал, я довольно новичок в работе со своими собственными API.

Ответ №1:

Если вы перейдете, скажем, /subjects/3 к _id.vue динамическому пути, вы можете использовать следующее, чтобы получить доступ к этому издевательскому 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, но, по крайней мере, так вы справляетесь с этим на интерфейсе.

Комментарии:

1. Ха, я получил ответ отсюда. Похоже, мой API работает неправильно. Я не бэкенд-разработчик, так что это действительно раздражает, чтобы исправить. Я мог бы задать отдельный вопрос, спасибо за помощь киссу!