Vue2 与 Vue3 全局引入 Axios 的详细教程

Vue.js 是一个用于构建用户界面的渐进式 JavaScript 框架，而 Axios 是一个基于 Promise 的 HTTP 客户端，常用于与后端服务器进行数据交互。在实际项目中，我们通常需要全局引入 Axios 以便在各个组件中方便地进行 HTTP 请求。本文将详细介绍如何在 Vue2 和 Vue3 项目中全局引入 Axios，并逐步讲解每一部分的代码。

Vue2 全局引入 Axios

1. 安装 Axios

首先，使用 npm 或 yarn 安装 Axios：

npminstall axios

或者

yarnadd axios

2. 配置 Axios

在 Vue2 项目的入口文件

main.js

中配置 Axios：

// main.jsimport Vue from'vue';import App from'./App.vue';import axios from'axios';

Vue.config.productionTip =false;// 将 axios 挂载到 Vue 原型上，这样在任何组件中都可以通过 this.$axios 访问Vue.prototype.$axios = axios;newVue({render:h=>h(App),}).$mount('#app');

代码详解：

• import Vue from 'vue';：引入 Vue 库。
• import App from './App.vue';：引入根组件 App。
• import axios from 'axios';：引入 Axios 库。
• Vue.config.productionTip = false;：关闭生产提示。
• Vue.prototype.$axios = axios;：将 Axios 挂载到 Vue 原型上，使得在所有 Vue 实例中都可以通过 this.$axios 访问 Axios。
• new Vue({ render: h => h(App), }).$mount('#app');：创建 Vue 实例，并将其挂载到 id 为 #app 的元素上。

3. 使用 Axios

在任何 Vue 组件中都可以通过

this.$axios

使用 Axios。例如：

<template><div><h1>{{ title }}</h1></div></template><script>exportdefault{data(){return{title:''};},created(){// 使用 this.$axios 发起 GET 请求this.$axios.get('https://jsonplaceholder.typicode.com/posts/1').then(response=>{// 将响应数据赋值给 titlethis.title = response.data.title;}).catch(error=>{
        console.log(error);});}};</script>

代码详解：

• data() { return { title: '' }; }：定义组件的数据，初始化 title 为空字符串。
• created()：Vue 生命周期钩子，组件创建完成时调用。
• this.$axios.get('https://jsonplaceholder.typicode.com/posts/1')：通过 Axios 发起 GET 请求。
• then(response => { this.title = response.data.title; })：请求成功后，将响应数据中的 title 赋值给组件的 title。
• catch(error => { console.log(error); })：请求失败时，打印错误信息。

Vue3 全局引入 Axios

1. 安装 Axios

和 Vue2 一样，首先安装 Axios：

npminstall axios

或者

yarnadd axios

2. 配置 Axios

在 Vue3 项目的入口文件

main.js

中配置 Axios：

// main.jsimport{ createApp }from'vue';import App from'./App.vue';import axios from'axios';// 创建 Vue 应用实例const app =createApp(App);// 将 axios 挂载到应用实例的全局属性上，这样在任何组件中都可以通过 this.$axios 访问
app.config.globalProperties.$axios = axios;// 挂载应用实例
app.mount('#app');

代码详解：

• import { createApp } from 'vue';：引入 Vue 的 createApp 函数。
• import App from './App.vue';：引入根组件 App。
• import axios from 'axios';：引入 Axios 库。
• const app = createApp(App);：创建 Vue 应用实例。
• app.config.globalProperties.$axios = axios;：将 Axios 挂载到应用实例的全局属性上，使得在所有组件中都可以通过 this.$axios 访问 Axios。
• app.mount('#app');：将应用实例挂载到 id 为 #app 的元素上。

3. 使用 Axios

在任何 Vue3 组件中都可以通过

this.$axios

使用 Axios。例如：

<template><div><h1>{{ title }}</h1></div></template><script>exportdefault{data(){return{title:''};},created(){// 使用 this.$axios 发起 GET 请求this.$axios.get('https://jsonplaceholder.typicode.com/posts/1').then(response=>{// 将响应数据赋值给 titlethis.title = response.data.title;}).catch(error=>{
        console.log(error);});}};</script>

代码详解：

• data() { return { title: '' }; }：定义组件的数据，初始化 title 为空字符串。
• created()：Vue 生命周期钩子，组件创建完成时调用。
• this.$axios.get('https://jsonplaceholder.typicode.com/posts/1')：通过 Axios 发起 GET 请求。
• then(response => { this.title = response.data.title; })：请求成功后，将响应数据中的 title 赋值给组件的 title。
• catch(error => { console.log(error); })：请求失败时，打印错误信息。

总结

本文详细介绍了在 Vue2 和 Vue3 项目中全局引入 Axios 的方法和步骤。在 Vue2 中，我们通过将 Axios 挂载到 Vue 原型上实现全局引入；在 Vue3 中，则是通过将 Axios 挂载到应用实例的全局属性上实现全局引入。通过这种方式，我们可以方便地在项目的任何组件中使用 Axios 进行 HTTP 请求，简化了代码编写和维护。希望本文对你在 Vue 项目中使用 Axios 有所帮助。