Vue中axios封装与使用教程

本文将详细介绍如何在Vue项目中有效地使用和封装axios库，以实现更高效、统一的API请求管理。首先，我们回顾一下axios的作用和安装过程。axios是一个流行的JavaScript库，用于在浏览器和Node.js环境中发送HTTP请求，其优点在于简洁的API和广泛的浏览器支持。 安装axios非常简单，只需在项目目录中使用npm命令行工具： ``` npm install axios --save ``` 接下来，我们在`src`目录下创建一个名为`service`的文件夹，并在其中建立一个名为`index.js`的文件，这是我们的axios封装入口点。 在`index.js`中，我们导入必要的模块，如axios本身、Mint-UI的Toast组件用于显示错误提示和项目路由： ```javascript import axios from 'axios'; import { Toast } from 'mint-ui'; import router from '../router'; ``` 为了提高请求的稳定性，设置了全局的超时时间： ```javascript axios.defaults.timeout = 50000; // 设置默认超时时间为50秒 ``` 然后，我们定义了http请求的拦截器。在`request`拦截器中，主要处理了以下几个方面： 1. **获取和添加token**: 检查本地存储中是否有用户认证的token（如JWT），如果有则将其添加到请求头`Authorization`或`token`字段。 2. **参数格式和位置**: 根据请求方法（GET或POST等）决定参数的放置位置。对于GET请求，参数通常放在URL的查询字符串中；而对于POST、PUT或DELETE等请求，参数放在`data`对象中。 3. **参数预处理**: 这里可能涉及到对参数进行编码、序列化或者添加其他定制逻辑。 接下来是`response`拦截器，用于处理服务器返回的数据，例如统一处理code字段，可以在这里进行错误码判断并根据code值执行不同的操作，如展示错误提示、跳转页面或进行业务逻辑处理： ```javascript axios.interceptors.response.use( response => { // 处理统一的code返回值 if (response.data.code === ...）{ // 根据code执行相应的操作，如： if (response.data.code === 'success') { // 成功处理 } else { // 处理错误 Toast.error(response.data.message); } } return response; }, error => { // 错误处理 console.error('Error', error); Toast.error('请求失败，请稍后重试'); router.push({ name: 'errorPage' }); // 跳转到错误页面 return Promise.reject(error); } ); ``` 通过以上步骤，我们已经创建了一个基本的axios封装，它允许在Vue项目中轻松地发送异步请求，同时提供了错误处理和统一参数处理的能力。这样可以大大提高代码的可维护性和一致性，使得团队间的协作更加高效。如果你的项目有更复杂的逻辑需求，例如分页、权限验证等，还可以在此基础上进一步扩展和定制。