时间戳

首页 > 解决方案 > 如何在 Vue 3 中获取数据？

vue.js - 如何在 Vue 3 中获取数据？

问题描述

我不知道如何使用 Vue 3 获取数据？我创建了一个操作，并通过此操作调用端点（https://api.openbrewerydb.org/breweries/5494）。我没有得到响应数据。

端点：

import { createStore } from 'vuex'

export default createStore({
  state: {
  },
  mutations: {
  },
  actions: {
    async getData() {
      await fetch('https://api.openbrewerydb.org/breweries/5494', {
        method: 'get',
        headers: { 'Content-type': 'application/json' },
      }).then((response) => {
        if (!response.ok) {
          throw Error(response.statusText);
        }
        console.log('response: ', response)
      }).catch((error) => {
        console.log('Looks like there was a problem: \n', error);
      });
    }
  },
  modules: {
  }
})

Vue组件：

<template>
  <div @click="loadData">Load Data</div>
</template>

<script>
import { useStore } from 'vuex'

export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },

  setup () {
    const store = useStore()

    const loadData = () => {
      store.dispatch('getData')
    }

    return { loadData }
  }
}
</script>

作为回应，我什么也没得到，但我应该得到：

{"id":5494,"name":"MadTree Brewing","brewery_type":"regional","street":"3301 Madison Rd","address_2":null,"address_3":null,"city":"Cincinnati","state":"Ohio","county_province":null,"postal_code":"45209-1132","country":"United States","longitude":"-84.4239715","latitude":"39.1563725","phone":"5138368733","website_url":"http://www.madtreebrewing.com","updated_at":"2018-08-24T15:44:22.281Z","created_at":"2018-07-24T01:34:01.620Z"}

标签： vue.jsfetchvuejs3

解决方案

您需要将数据转换为 json

.then(res=>res.json())

这将为您解决问题。

const getData = () => {
  fetch('https://api.openbrewerydb.org/breweries/5494', {
    headers: { 'Content-type': 'application/json' },
  }).then(res=>res.json()).then((response) => {
    console.log({ response })
  }).catch((error) => {
    console.log('Looks like there was a problem: \n', error);
  });
}

getData();

如果响应失败，它肯定会让你抓住。

推荐阅读