axios 封装数据加载中

时间: 2023-09-25 12:06:28 浏览: 88

详解vue中axios请求的封装

在Vue.js应用中，使用axios进行HTTP请求是常见的实践，因为axios是一个强大的基于Promise的库，支持浏览器和Node.js环境。Vue官方推荐使用axios作为HTTP客户端。为了提高代码的可维护性和灵活性，开发者通常会对其进行封装，以实现更加便捷和一致的API调用。安装axios库，可以通过npm命令行工具进行安装： ```bash npm install axios ``` 接下来，进行axios的封装。创建一个名为`http.js`的文件，导入axios库，并设置接口请求的基础URL。考虑到不同环境（开发、测试、生产）可能有不同的URL，我们可以使用`process.env.NODE_ENV`来判断当前环境： ```javascript import axios from 'axios'; if (process.env.NODE_ENV === 'development') { axios.defaults.baseURL = 'http://dev.xxx.com'; } else if (process.env.NODE_ENV === 'production') { axios.defaults.baseURL = 'http://prod.xxx.com'; } ``` 在开发阶段，由于跨域限制，通常需要配置代理。对于使用Vue CLI 3构建的应用，可以在`vue.config.js`文件中设置代理，例如： ```javascript module.exports = { devServer: { proxy: { '/proxyApi': { target: 'http://dev.xxx.com', changeOrigin: true, pathRewrite: { '^/proxyApi': '' } } } } }; ``` 这样，所有以`/proxyApi`开头的请求都将被代理到`http://dev.xxx.com`。在开发环境中，修改`http.js`中的配置以匹配代理设置： ```javascript if (process.env.NODE_ENV === 'development') { axios.defaults.baseURL = '/proxyApi'; } else if (process.env.NODE_ENV === 'production') { axios.defaults.baseURL = 'http://prod.xxx.com'; } ``` axios的拦截器功能强大，可以用于统一处理请求和响应。例如，可以在请求拦截器中添加token，确保每次请求都携带认证信息： ```javascript // 请求拦截器 axios.interceptors.request.use( config => { const token = localStorage.getItem('token'); // 假设token存储在localStorage中 if (token) { config.headers.Authorization = `Bearer ${token}`; } return config; }, error => Promise.reject(error) ); // 响应拦截器 axios.interceptors.response.use( response => { if (response.status === 200) { // 根据返回的状态码和业务逻辑进行处理 if (response.data.code === 511) { // 未授权，调取授权接口 } else if (response.data.code === 510) { // 未登录，跳转登录页 } else { return Promise.resolve(response); } } else { return Promise.reject(response); } }, error => { // 错误处理 return Promise.reject(error); } ); ``` 通过这种方式，你可以对每个请求添加通用的处理逻辑，如认证检查、错误处理等。这使得在大型项目中管理HTTP请求变得更加有序，同时也降低了代码的复杂性。此外，封装后的axios还可以提供更符合项目需求的定制化方法，如自定义错误处理、统一的加载状态管理等。封装axios时，可以创建自定义的get和post方法，以简化调用： ```javascript export function get(url, params) { return axios.get(url, { params }); } export function post(url, data) { return axios.post(url, data); } ``` 现在，你可以在Vue组件中通过`import`这些自定义的方法来发起HTTP请求，而无需每次都直接调用axios。这种封装使得代码更加模块化，提高了代码的可读性和可维护性。

在封装axios时，可以使用Loading组件来实现数据加载中的效果。根据提供的源码，可以看到openLoading函数用于打开加载动画，closeLoading函数用于关闭加载动画。其中，LoadingInstance._target保存了Loading实例，LoadingInstance._count用于计算数量，保证一次只有一个loading。具体实现步骤如下： 1. 在需要加载数据的地方调用openLoading函数，传入加载动画的容器DOM元素作为参数，或者使用默认的body元素作为容器。 2. 在数据加载完成后，调用closeLoading函数，关闭加载动画。 3. 可以根据业务需求在openLoading函数中修改加载动画的文本、样式等配置。通过以上封装，当进行数据请求时，可以在请求开始时显示加载动画，等待请求完成后关闭加载动画，以提升用户体验。123 #### 引用[.reference_title] - *1* *2* *3* [axios封装](https://blog.csdn.net/weixin_43239880/article/details/130143352)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]

阅读全文

axios 封装 数据加载中

相关推荐

Vue中axios封装详解：报错处理、鉴权与功能应用

Vue中axios封装与使用教程

Vue项目中实现高效API数据交互的axios封装

使用axios封装Ajax调用数据接口

vue axios封装

uniapp axios封装

request axios封装

avue axios封装

axios封装react

移动端axios封装

vue axios 封装

vue3中 axios封装

vue3中axios封装使用

vue3 axios封装

axios封装ts版

axios封装国际化

axios 封装网络请求

vue3 axios 封装

Axios封装与拦截实战：请求处理与安全防范

最新推荐

vue项目中axios请求网络接口封装的示例代码

vue中Axios的封装与API接口的管理详解

基于小程序请求接口wx.request封装的类axios请求

vue+vuex+axios从后台获取数据存入vuex,组件之间共享数据操作

华普微四通道数字隔离器

正整数数组验证库：确保值符合正整数规则

管理建模和仿真的文件

【损失函数与随机梯度下降】：探索学习率对损失函数的影响，实现高效模型训练

在ADS软件中，如何选择并优化低噪声放大器的直流工作点以实现最佳性能？

系统移植工具集：镜像、工具链及其他必备软件包

axios 封装数据加载中