Vue项目中封装axios的实战教程

"该文档详细介绍了在Vue项目中封装axios的两种版本，即基础版和进阶版。封装axios的主要目的是为了更好地管理和统一项目的HTTP请求，提高代码复用性，同时增强错误处理和用户体验。文档内容包括配置axios、封装请求以及如何在Vue组件中使用这些封装好的请求功能。此外，还提及了结合Element UI库中的Message和Loading组件来提供加载提示和错误信息反馈。" 在Vue开发中，axios是常用的HTTP库，用于发送网络请求。以下是封装axios的步骤： ### 基础版 #### 第一步：配置axios 首先，我们需要导入axios库，并创建一个配置文件，例如`Service.js`。在这个文件中，你可以设置axios的基础URL（如`https://localhost:3000/`），超时时间（如7000毫秒），默认请求方法（通常是POST）以及请求头，比如设置`Content-Type`为`application/json;charset=UTF-8`。 ```javascript import axios from 'axios'; const ConfigBaseURL = 'https://localhost:3000/'; const Service = axios.create({ timeout: 7000, baseURL: ConfigBaseURL, method: 'post', headers: { 'Content-Type': 'application/json;charset=UTF-8', }, }); ``` #### 第二步：封装请求 接下来，我们可以定义一些常用的请求方法，例如GET、POST、PUT、DELETE等，以简化调用。这些方法通常会包装在Service实例上，以处理如数据转换、错误处理等操作。 ```javascript // 添加请求和响应拦截器 Service.interceptors.request.use(config => { // 显示加载提示 loadingInstance = Loading.service({ lock: true, text: 'loading' }); return config; }); Service.interceptors.response.use( response => { // 关闭加载提示 loadingInstance.close(); return response.data; }, error => { console.log('TCL:error', error); const msg = error.Message !== undefined ? error.Message : ''; // 显示错误信息 Message.error({ message: '网络错误' + msg, duration: 3 * 1000 }); loadingInstance.close(); return Promise.reject(error); } ); ``` #### 第三步：使用 在Vue组件中，我们可以通过导入并调用封装好的Service来发送HTTP请求。例如： ```javascript import { Service } from './Service.js'; export default { data() { return { // ... }; }, methods: { fetchData() { Service.get('/api/data').then(response => { // 处理成功响应 }).catch(error => { // 处理错误 }); }, }, }; ``` ### 进阶版 进阶版通常涉及更复杂的配置，例如根据环境变量动态设置基础URL，或者添加更复杂的数据处理和错误处理逻辑。文档未提供具体的进阶版封装示例，但可以在此基础上扩展，例如添加对不同状态码的处理，或者实现请求合并和取消等功能。 封装axios是为了使项目中的HTTP请求更加规范、高效，通过拦截器可以实现全局的错误处理和增强用户体验，如加载提示和错误消息显示。通过这种方式，开发者可以专注于业务逻辑，而不是重复的网络请求代码。