【JavaScript源代码】vue封装axios的几种方法.docx

vue封装axios的几种方法 　　目录　　基础版第一步：配置axios 第二步：封装请求 第三步：使用 进阶版　　基础版　　第一步：配置axios 第二步：封装请求 第三步：使用 　　第一步：配置axios 　　第二步：封装请求 　　第三步：使用 　　进阶版　　基础版　　首先，创建一个Service.js，这里面存放的时axios的配置以及拦截器等，最后导出一个axios对象。我平常elementUI用的比较多，这里你也可以使用自己的UI库。　　import axios from 'axios'　　import { Message, Loading } from 'element-ui'　　 Vue.js 是一款流行的前端框架，而axios 是一个基于Promise 的HTTP库，可以在浏览器和node.js中使用。在Vue项目中，通常会将axios进行封装，以便更好地管理和优化网络请求。以下将详细介绍两种不同级别的axios封装方法。 ### 基础版封装 #### 第一步：配置axios 你需要引入axios库并进行基本配置。这包括设置超时时间、基础URL、默认请求方法以及请求头。例如： ```javascript import axios from 'axios'; import { Message, Loading } from 'element-ui'; const ConfigBaseURL = 'https://localhost:3000/'; // 默认路径，可使用env变量根据环境切换 let loadingInstance = null; // 用于全局加载指示器 const Service = axios.create({ timeout: 7000, // 请求超时时间 baseURL: ConfigBaseURL, method: 'post', headers: { 'Content-Type': 'application/json;charset=UTF-8' } }); ``` #### 第二步：封装请求 接下来，你可以创建一个函数，用于处理具体的API请求。例如： ```javascript export function getConfigsByProductId(productId) { return Service({ url: '/manager/getConfigsByProductId', params: { productId: productId } }); } export function getAllAndroidPlugins() { return Service({ url: '/manager/getAndroidPlugin ', method: 'get' }); } export function addNewAndroidPlugin(data) { return Service({ url: '/manager/addAndroidPlguin', data: JSON.stringify(data) }); } ``` 这样，每个函数代表一个特定的API调用，便于管理和维护。 #### 第三步：使用 在Vue组件中，你可以直接导入这些封装好的函数，并在适当的地方调用它们： ```javascript import { getConfigsByProductId, getAllAndroidPlugins, addNewAndroidPlugin } from '@/api/request'; export default { data() { return { // ... }; }, methods: { fetchData() { this.getConfigsByProductId(123).then(response => { // 处理响应数据 }).catch(error => { // 处理错误 }); } } }; ``` ### 进阶版封装 在基础版封装的基础上，可以添加更多的功能，如请求和响应拦截器，以实现更高级别的控制。 #### 请求拦截器 请求拦截器可以在发送请求前进行预处理，例如添加全局的加载提示： ```javascript Service.interceptors.request.use(config => { loadingInstance = Loading.service({ lock: true, text: 'loading...' }); return config; }); ``` #### 响应拦截器 响应拦截器则用于处理请求后的结果，比如显示错误信息，关闭加载提示： ```javascript Service.interceptors.response.use( response => { loadingInstance.close(); return response.data; }, error => { const msg = error.Message !== undefined ? error.Message : ''; Message({ message: '网络错误' + msg, type: 'error', duration: 3 * 1000 }); loadingInstance.close(); return Promise.reject(error); } ); ``` 通过这种方式，你可以对所有请求统一处理，提供更好的用户体验。 总结来说，Vue中封装axios的主要目的是为了提高代码的可读性、可维护性和复用性，同时可以通过拦截器进行异常处理和状态管理。基础版封装关注于请求函数的创建，而进阶版则更注重于请求生命周期的管理，如错误处理和用户交互反馈。