如何在Vue 3中获取数据？

Question

我不知道如何用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"}

Answer 1

您需要将数据转为json

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

这将为你解决问题。

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

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