IOSVue2 中封装 Axios 的详细指南 - Powered by Discuz! Archiver

前进之路 发表于 2024-12-31 21:31:43

Vue2 中封装 Axios 的详细指南

在现代的前端开发中，与后端进行数据交互是必不可少的。Axios 是一个基于 Promise 的 HTTP 客户端，广泛用于欣赏器和 Node.js 情况中。在 Vue.js 项目中，Axios 通常用于发送 HTTP 请求。为了提高代码的可维护性和复用性，我们通常会对 Axios 进行封装。本文将详细先容如何在 Vue2 项目中封装 Axios。
1. 安装 Axios

起首，我们需要在项目中安装 Axios。假如你还没有安装 Axios，可以通过 npm 或 yarn 进行安装：
npm install axios
大概
yarn add axios
2. 创建 Axios 实例

在 Vue 项目中，我们通常会在 src 目录下创建一个 api 文件夹，用于存放与 API 干系的代码。在这个文件夹中，我们可以创建一个 axios.js 文件，用于设置 Axios 实例。
// src/api/axios.js

import axios from 'axios';

// 创建 Axios 实例
const service = axios.create({
baseURL: process.env.VUE_APP_BASE_API, // 设置 API 的基础 URL
timeout: 5000, // 请求超时时间
});

// 请求拦截器
service.interceptors.request.use(
config => {
// 在发送请求之前做些什么
// 例如：添加 token
const token = localStorage.getItem('token');
if (token) {
   config.headers['Authorization'] = `Bearer ${token}`;
}
return config;
},
error => {
// 对请求错误做些什么
return Promise.reject(error);
}
);

// 响应拦截器
service.interceptors.response.use(
response => {
// 对响应数据做些什么
return response.data;
},
error => {
// 对响应错误做些什么
if (error.response) {
   // 根据不同的状态码进行不同的处理
   switch (error.response.status) {
   case 401:
      // 未授权，跳转到登录页面
      router.push('/login');
      break;
   case 404:
      // 资源未找到
      console.error('请求的资源不存在');
      break;
   default:
      console.error('请求失败', error.response.data);
   }
} else if (error.request) {
   // 请求已发出，但没有收到响应
   console.error('请求超时或网络错误', error.request);
} else {
   // 其他错误
   console.error('请求配置错误', error.message);
}
return Promise.reject(error);
}
);

export default service;
2.1 设置底子 URL

在 axios.create 方法中，我们设置了 baseURL，这是所有请求的底子 URL。通常，我们会将这个值放在项目标 .env 文件中，以便在不同的情况中使用不同的 API 地址。
# .env.development
VUE_APP_BASE_API=http://localhost:3000/api

# .env.production
VUE_APP_BASE_API=https://api.example.com/api
2.2 请求拦截器

请求拦截器允许我们在请求发送之前对请求进行一些处置惩罚。例如，我们可以在请求头中添加 Authorization 字段，以便在请求中携带 token。
2.3 相应拦截器

相应拦截器允许我们在汲取到相应之后对相应进行一些处置惩罚。例如，我们可以直接返回相应的 data 字段，而不是整个相应对象。此外，我们还可以根据不同的状态码进行不同的处置惩罚，例如在未授权时跳转到登录页面。
3. 封装 API 请求

在 api 文件夹中，我们可以创建一个 user.js 文件，用于封装与用户干系的 API 请求。
// src/api/user.js

import service from './axios';

// 获取用户信息
export function getUserInfo(userId) {
return service.get(`/users/${userId}`);
}

// 更新用户信息
export function updateUserInfo(userId, data) {
return service.put(`/users/${userId}`, data);
}

// 删除用户
export function deleteUser(userId) {
return service.delete(`/users/${userId}`);
}
在这个文件中，我们封装了三个与用户干系的 API 请求：获取用户信息、更新用户信息和删除用户。每个函数都返回一个 Promise，因此我们可以在 Vue 组件中使用 async/await 来处置惩罚这些请求。
4. 在 Vue 组件中使用封装的 API

现在，我们可以在 Vue 组件中使用封装的 API 请求了。例如，在一个用户详情页面中，我们可以使用 getUserInfo 函数来获取用户信息。
<template>
<div>
<h1>用户详情</h1>
<p>用户名: {{ user.name }}</p>
<p>邮箱: {{ user.email }}</p>
<button @click="updateUser">更新用户信息</button>
<button @click="deleteUser">删除用户</button>
</div>
</template>

<script>
import { getUserInfo, updateUserInfo, deleteUser } from '@/api/user';

export default {
data() {
return {
   user: {},
};
},
async created() {
// 获取用户信息
const userId = this.$route.params.id;
this.user = await getUserInfo(userId);
},
methods: {
async updateUser() {
   const userId = this.$route.params.id;
   const updatedData = {
   name: 'New Name',
   email: 'newemail@example.com',
   };
   await updateUserInfo(userId, updatedData);
   this.user = await getUserInfo(userId);
},
async deleteUser() {
   const userId = this.$route.params.id;
   await deleteUser(userId);
   this.$router.push('/users');
},
},
};
</script>
在这个组件中，我们在 created 生命周期钩子中调用 getUserInfo 函数来获取用户信息，并在 updateUser 和 deleteUser 方法中分别调用 updateUserInfo 和 deleteUser 函数来更新和删除用户。
5. 处置惩罚全局错误

在实际项目中，我们可能需要在全局范围内处置惩罚某些错误，例如网络错误或服务器错误。我们可以在 Vue 实例中添加一个全局的错误处置惩罚函数。
// src/main.js

import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
import service from './api/axios';

Vue.config.productionTip = false;

// 全局错误处理
Vue.prototype.$handleError = function (error) {
if (error.response) {
// 根据不同的状态码进行不同的处理
switch (error.response.status) {
   case 401:
   // 未授权，跳转到登录页面
   router.push('/login');
   break;
   case 404:
   // 资源未找到
   console.error('请求的资源不存在');
   break;
   default:
   console.error('请求失败', error.response.data);
}
} else if (error.request) {
// 请求已发出，但没有收到响应
console.error('请求超时或网络错误', error.request);
} else {
// 其他错误
console.error('请求配置错误', error.message);
}
};

new Vue({
router,
store,
render: h => h(App),
}).$mount('#app');
然后，我们可以在组件中使用 $handleError 方法来处置惩罚错误。
methods: {
async updateUser() {
const userId = this.$route.params.id;
const updatedData = {
   name: 'New Name',
   email: 'newemail@example.com',
};
try {
   await updateUserInfo(userId, updatedData);
   this.user = await getUserInfo(userId);
} catch (error) {
   this.$handleError(error);
}
},
async deleteUser() {
const userId = this.$route.params.id;
try {
   await deleteUser(userId);
   this.$router.push('/users');
} catch (error) {
   this.$handleError(error);
}
},
},
6. 总结

通过封装 Axios，我们可以在 Vue2 项目中更好地管理 API 请求，提高代码的可维护性和复用性。我们创建了一个 Axios 实例，并设置了请求和相应拦截器，以便在请求发送和相应汲取时进行一些处置惩罚。然后，我们封装了与用户干系的 API 请求，并在 Vue 组件中使用这些封装的 API。最后，我们还添加了一个全局错误处置惩罚函数，以便在全局范围内处置惩罚某些错误。
通过这些步骤，我们可以更好地组织和管理 Vue2 项目中的 API 请求，使代码更加清晰和易于维护。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

页: [1]

IT评测·应用市场-qidao123.com技术社区's Archiver

Vue2 中封装 Axios 的详细指南