Vue3在Setup中使用axios请求获取的值方式

Vue3是什么？

Vue3是一款流行的JavaScript库，用于构建现代的单页面应用程序。它允许您通过使用组件和单向数据流来构建可维护性良好的可扩展应用程序。Vue3也为开发人员提供了许多工具和功能，以帮助轻松构建复杂的前端应用程序。其中，最常用的功能之一是使用axios请求获取数据。

axios是什么？

axios是一种流行的JavaScript库，用于向后端服务器发起HTTP请求以获取数据。它可以轻松处理GET，POST，PUT和DELETE请求，并为开发人员提供了多种配置选项。axios在前端开发中非常受欢迎，因为它易于使用，功能强大，且可以适应多种编程需求。

Vue3中使用axios请求获取数据

在Vue3中，可以在setup()函数中使用axios请求获取数据。setup()是新的组合API的一部分，它使得在组件中整合数据、计算属性和方法变得更加容易。以下是使用axios在Vue3中获取数据的步骤：

步骤1：安装axios

首先，需要在Vue3项目中安装axios模块。可以使用npm或yarn来完成安装：

npm install axios

或

yarn add axios

安装完毕后，在需要使用axios的文件中引入axios：

import axios from 'axios';

步骤2：使用axios发送请求

接下来，可以使用axios向服务器发送请求并获取响应。为了演示如何使用axios请求API，下面创建了一个简单的函数来从GitHub API中获取用户信息：

async function fetchUserData(username) {

  const response = await axios.get(https://api.github.com/users/${username});

  return response.data;

}

在上述示例中，使用axios的get()方法向GitHub API发送请求，获取给定用户的详细信息。response.data包含从API返回的数据。

步骤3：在setup()中使用数据

最后，可以将使用axios获取的数据用于组件中。例如，在Vue3中有两种方式存储响应数据：ref和reactive。

要使用ref存储数据，请使用以下代码：

import { ref } from 'vue';

export default {

  setup() {

    const userData = ref(null);

    async function getUserData(username) {

      userData.value = await fetchUserData(username);

    }

    return {

      userData,

      getUserData,

    };

  },

};

上述代码中，使用ref创建了名为userData的变量。getUserData()函数调用fetchUserData()函数来获取数据，并将其分配给userData.value。 这里使用userData.value是因为在Vue3中，ref与其关联的值是一个对象，而ref本身是响应式的。

要使用reactive存储数据，可以使用以下代码：

import { reactive } from 'vue';

export default {

  setup() {

    const state = reactive({

      userData: null,

    });

    async function getUserData(username) {

      state.userData = await fetchUserData(username);

    }

    return {

      state,

      getUserData,

    };

  },

};

这里创建了一个名为state的响应式状态对象，其中包含一个名为userData的属性。getUserData()函数调用fetchUserData()函数来获取数据，并将其分配给state.userData。

总结

在Vue3中使用axios请求获取数据是一个简单而强大的功能。使用axios可以快速，轻松地从后端服务器获取数据。结合Vue3的组合API，可以轻松地将数据整合到组件中，创建出非常强大和灵活的前端应用程序。