如何用Fetch API从Vue组件中获取API数据（附代码示例） - 掘金

如果你是一个网络开发者，你很有可能在某些时候不得不从API中获取数据。如果你使用的是Vue框架，你可能想知道如何在Vue组件中获取数据并保存它。

幸运的是，使用本地的Fetch API，这很容易做到。在这篇文章中，我们将学习如何用Options和Composition API来做，这是编写Vue组件的两种官方方式。

如果你想了解如何将用Vue构建的前端和外部API连接起来，请继续阅读!

为什么使用Fetch API？

如果你不熟悉fetch API，它是一种在JavaScript中进行异步HTTP请求的方法。从本质上讲，它允许你从外部来源获取数据，然后在你的代码中对这些数据做一些处理。

fetch API在大多数现代浏览器中都是可用的，但如果你使用的是旧的浏览器，你可能需要使用一个polyfill。

要使用Fetch API，我们首先需要创建一个Request对象。这个对象将接受一个url和options对象作为参数。url参数是我们指定我们想要调用的API的端点的地方。选项对象是我们可以指定诸如HTTP方法（如GET或POST）、头文件、正文等的地方。

一旦我们有了我们的Request对象，我们就可以调用本地的 获取方法，它将返回一个Promise。这个Promise将以一个Response对象来解决。响应对象有一个json()方法，我们可以调用它来获得我们想要的JSON数据。

这就是一个简单的GET调用在实践中的样子：

fetch("https://api.example.com/users")
.then(res => res.json())
.then(data => console.log(data))

这将简单地在我们的本地控制台显示API数据。

然而，你如何在Vue组件中存储和使用这些数据？让我们通过创建一个非常简单的例子来学习如何做到这一点：一个调用JSON占位符API并显示我们从特定端点检索到的项目列表的应用程序。

让我们直接进入，看看如何使用Options API调用一个API。

使用选项语法调用API

正如你可能知道的，Options语法是创建Vue组件的传统方式。在这里，你需要根据你的组件中的数据类型来声明一些选项（因此而得名）。

让我们看看我们如何从API中获取数据，并在用选项语法编写的组件中使用它。

首先，我们需要创建一个新的Vue实例并定义一个变量。我们将它初始化为一个空数组，因为我们将在这里添加我们从JSON占位符API中获取的所有信息：

<script>
  export default {
    data() {
      return {
        listItems: []
      }
    }
  }
</script>

然后，在我们的方法部分，我们将创建一个方法，从实际的API中获取数据。在这种情况下，我们将使用Async/Await语法来增加清晰度：

<script>
  export default {
    data() {
      return {
        listItems: []
      }
    },
    methods: {
      async getData() {
        const res = await fetch("https://jsonplaceholder.typicode.com/posts");
        const finalRes = await res.json();
        this.listItems = finalRes;
      }
    }
  }
</script>

你可能已经注意到了，在最后一步中，我们已经将API响应直接保存在我们之前生成的变量中。这意味着数据现在在我们的组件中是全局可用的，我们可以在我们的模板中使用v-for语法渲染它。

<template>
  <div v-for="item in listItems">
    {{item.title}}
  </div>
</template>

你的HTML没有显示任何东西吗？在我们的应用程序真正显示任何东西之前，我们必须调用 getData方法。我们可以在加载我们的组件时使用 装入钩子：

<script>
  export default {
    data() {
      return {
        listItems: []
      }
    },
    methods: {
      async getData() {
        const res = await fetch("https://jsonplaceholder.typicode.com/posts");
        const finalRes = await res.json();
        this.listItems = finalRes;
      }
    },
    mounted() {
      this.getData()
    }
  }
</script>

就这样了!我们现在有一个列表，显示我们从外部API获取的数据。

使用组合句法调用一个API

使用组合API调用外部数据源，在某些方面甚至比使用选项更容易。我们唯一需要改变的是我们的

下面是同样的代码在使用Composition API时的样子。注意我们使用的是

<script setup>
  import { ref } from 'vue';

  const listItems = ref([]);

  async function getData() {
    const res = await fetch("https://jsonplaceholder.typicode.com/posts");
    const finalRes = await res.json();
    listItems.value = finalRes;
  }

 getData()
</script>

很简单，是吧？正如你所看到的，使用Fetch API在Vue项目中获取数据实际上是非常容易实现的。我们希望这篇文章能帮助你

作者：Jovie
链接：https://juejin.cn/post/7176277379168337979
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。