axios在vue3中的用法

在Vue 3中，可以使用axios库来进行网络请求。axios是一个基于Promise的HTTP客户端，可以在浏览器和Node.js中使用。

首先，你需要安装axios库。可以通过npm或者yarn来安装：

npm install axios

或者

yarn add axios

安装完成后，在需要使用axios的地方引入它：

import axios from 'axios';

接下来，你可以使用axios发送HTTP请求。axios提供了多种方法，如get、post、put、delete等。以下是一个简单的例子：

axios.get('/api/users')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

在上面的例子中，我们使用了axios的get方法发送了一个GET请求到`/api/users`接口，并通过Promise的then方法处理返回的数据。如果请求出现错误，可以通过catch方法捕获并处理错误。

除了get方法，axios还提供了其他方法，如post、put、delete等，用于发送不同类型的请求。你可以根据具体需求选择合适的方法。

另外，在Vue 3中，你可以将axios封装成一个插件，以便在整个应用中方便地使用。以下是一个简单的示例：

// axios.js
import axios from 'axios';

const instance = axios.create({
  baseURL: 'https://api.example.com', // 设置基础URL
  timeout: 5000, // 设置超时时间
});

export default {
  install: (app) => {
    app.config.globalProperties.$axios = instance;
  },
};

然后，在main.js中使用该插件：

import { createApp } from 'vue';
import App from './App.vue';
import axiosPlugin from './axios';

const app = createApp(App);
app.use(axiosPlugin);
app.mount('#app');

现在，你可以在Vue组件中通过`this.$axios`来使用axios了：

export default {
  mounted() {
    this.$axios.get('/api/users')
      .then(response => {
        console.log(response.data);
      })
      .catch(error => {
        console.error(error);
      });
  },
};