vue3中axios安装使用（简单容易版）

一、介绍

在 Vue 3 项目中安装 Axios 的主要原因是为了方便进行 HTTP 请求。Axios 是一个基于 Promise 的 HTTP 客户端，它使得在 Vue 3 项目中与后端服务器进行数据交互变得更加简单和灵活。以下是使用 Axios 的一些主要原因：

1.异步请求

Axios 支持发送异步请求，使得你可以在 Vue 3 项目中方便地处理异步操作，如获取数据、提交表单等。

2.Promise 风格

Axios 的 API 是基于 Promise 的，这使得处理异步操作更为直观和方便。你可以使用 async/await 或 .then().catch() 的方式处理异步操作。

3.拦截器

Axios 提供了请求和响应拦截器，允许你在请求发送之前或响应返回之后进行额外的处理。这对于添加全局的认证信息、处理错误等非常有用。

4.统一配置

你可以在项目中配置一个全局的 Axios 实例，统一设置请求的 baseURL、请求头等信息，避免在每个请求中重复配置。

5.取消请求

Axios 允许取消请求，这在一些场景下非常有用，比如用户在输入框中输入搜索关键字时，你可以取消之前的搜索请求，只处理最新的请求。

6.适应性

Axios 可以用于浏览器端和 Node.js 环境，使得你的代码可以在不同的环境中共享。

7.流行且活跃

Axios 是一个非常流行和活跃的 HTTP 客户端库，有着广泛的社区支持，因此在遇到问题时能够更容易找到解决方案。

8.跨域请求

Axios 支持处理跨域请求，可以通过配置 CORS（跨源资源共享）或使用 JSONP 进行处理。

二、安装Axios

在 Vue 3 中使用 Axios，你需要先安装 Axios，然后在你的 Vue 3 项目中引入并使用它。以下是安装和使用 Axios 的基本步骤：

步骤 1: 安装 Axios

使用 npm 安装 Axios：

npm install axios

或者使用 yarn：

yarn add axios

步骤 2: 在 Vue 3 项目中引入 Axios

在你的项目中，可以选择在全局引入或者在组件中按需引入 Axios。

1.全局引入（main.js 或 main.ts）

// main.js 或 main.ts
import { createApp } from 'vue';
import App from './App.vue';
import axios from 'axios';

const app = createApp(App);

// 将 axios 挂载到 Vue 实例的原型上
app.config.globalProperties.$axios = axios;

app.mount('#app');

现在，你可以在任何组件中通过 this.$axios 访问 Axios。

2.组件中按需引入

// 你的组件文件
<script>
import axios from 'axios';

export default {
  methods: {
    fetchData() {
      // 使用 axios 发送请求
      axios.get('https://api.example.com/data')
        .then(response => {
          console.log(response.data);
        })
        .catch(error => {
          console.error('Error fetching data:', error);
        });
    }
  }
}
</script>

步骤 3: 发送请求

现在，你可以在项目中使用 Axios 发送请求了。下面是一个简单的例子：

// 你的组件文件
<script>
import axios from 'axios';

export default {
  methods: {
    fetchData() {
      // 使用 axios 发送 GET 请求
      axios.get('https://api.example.com/data')
        .then(response => {
          console.log(response.data);
        })
        .catch(error => {
          console.error('Error fetching data:', error);
        });
    }
  }
}
</script>

当然，Axios 支持多种请求方式，如 GET、POST、PUT 等。你可以根据你的实际需求选择适当的请求方式。

这只是一个基本的使用示例。在实际项目中，你可能需要更多的配置，比如设置请求头、处理请求拦截器、响应拦截器等。请查阅 Axios 文档 获取更多详细信息。