[教程]Vue.js高效封装Axios请求，掌握前端数据交互新技能

在Vue.js项目中，与后端进行数据交互是必不可少的。Axios是一个基于Promise的HTTP客户端，它支持丰富的配置，支持Promise，并且可以在浏览器端和Node.js端使用。封装Axios...

在Vue.js项目中，与后端进行数据交互是必不可少的。Axios是一个基于Promise的HTTP客户端，它支持丰富的配置，支持Promise，并且可以在浏览器端和Node.js端使用。封装Axios可以提高代码的可维护性和复用性，下面将详细介绍如何在Vue.js项目中高效封装Axios请求。

安装Axios

首先，需要在项目中安装Axios。如果你还没有安装Axios，可以通过npm或yarn进行安装：

npm install axios

或者

yarn add axios

创建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_API_BASE_URL, // 设置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: // 未授权，跳转到登录页面 break; // 其他状态码处理 } } return Promise.reject(error); }
);
export default service;

封装请求方法

为了方便使用，我们可以封装一些常用的请求方法，如get、post、put、delete等。

// src/api/index.js
import service from './axios';
export const get = (url, params) => { return service({ method: 'get', url, params, });
};
export const post = (url, data) => { return service({ method: 'post', url, data, });
};
export const put = (url, data) => { return service({ method: 'put', url, data, });
};
export const deleteRequest = (url) => { return service({ method: 'delete', url, });
};

使用封装的请求方法

在Vue组件中，我们可以直接使用封装的请求方法来发送请求。

<template> <div> <button @click="fetchData">获取数据</button> </div>
</template>
<script>
import { get } from '@/api';
export default { methods: { async fetchData() { try { const response = await get('/api/data'); console.log(response); } catch (error) { console.error('Error fetching data:', error); } }, },
};
</script>

通过以上步骤，我们就可以在Vue.js项目中高效封装Axios请求，从而更好地掌握前端数据交互的新技能。