Vue+iView LoadingBar封装Axios请求

2024-02-15 16:38

本文主要是介绍Vue+iView LoadingBar封装Axios请求,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

import Axios from 'axios'
import qs from 'qs'
import iView from 'iview'Axios.defaults.timeout = 60000
Axios.defaults.baseURL = ''//http request 拦截器
Axios.interceptors.request.use(config => {if(config.method === 'post') {config.data = qs.stringify(config.data); config.headers = {'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'}} else if(config.method === 'get') {let newParams = {}for(let key in config.params) {newParams[key] = encodeURIComponent(config.params[key])}config.params = newParamsconfig.headers = {'Content-Type': 'application/json;charset=UTF-8'}}//开始显示LoadingBariView.LoadingBar.start();return config},error => {//失败显示LoadingBariView.LoadingBar.error();return Promise.reject(error)}
)//http response 拦截器
Axios.interceptors.response.use(response => {let data = response.dataif(data.successFlag === 1) {//关闭显示LoadingBariView.LoadingBar.finish();return Promise.resolve(data)} else {iView.LoadingBar.error();return Promise.reject(data)}},error => {iView.LoadingBar.error();return Promise.reject(error)}
)/*** 封装get方法* @param url* @param data* @returns {Promise}*/const get = function get(url, params = {}) {return new Promise((resolve, reject) => {Axios.get(url, {params: params}).then(response => {resolve(response);}).catch(err => {reject(err)})})
}/*** 封装post请求* @param url* @param params* @returns {Promise}*/const post = function post(url, params = {}) {return new Promise((resolve, reject) => {Axios.post(url, params).then(response => {resolve(response);}, err => {reject(err)})})
}/*** 封装patch请求* @param url* @param data* @returns {Promise}*/const patch = function patch(url, data = {}) {return new Promise((resolve, reject) => {Axios.patch(url, data).then(response => {resolve(response);}, err => {reject(err)})})
}/*** 封装put请求* @param url* @param data* @returns {Promise}*/const put = function put(url, data = {}) {return new Promise((resolve, reject) => {Axios.put(url, data).then(response => {resolve(response);}, err => {reject(err)})})
}export default {post,get,patch,put
}

 

这篇关于Vue+iView LoadingBar封装Axios请求的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/711932

相关文章

vue基于ElementUI动态设置表格高度的3种方法

《vue基于ElementUI动态设置表格高度的3种方法》ElementUI+vue动态设置表格高度的几种方法,抛砖引玉,还有其它方法动态设置表格高度,大家可以开动脑筋... 方法一、css + js的形式这个方法需要在表格外层设置一个div,原理是将表格的高度设置成外层div的高度,所以外层的div需要

Vue项目中Element UI组件未注册的问题原因及解决方法

《Vue项目中ElementUI组件未注册的问题原因及解决方法》在Vue项目中使用ElementUI组件库时,开发者可能会遇到一些常见问题,例如组件未正确注册导致的警告或错误,本文将详细探讨这些问题... 目录引言一、问题背景1.1 错误信息分析1.2 问题原因二、解决方法2.1 全局引入 Element

详解如何在React中执行条件渲染

《详解如何在React中执行条件渲染》在现代Web开发中,React作为一种流行的JavaScript库,为开发者提供了一种高效构建用户界面的方式,条件渲染是React中的一个关键概念,本文将深入探讨... 目录引言什么是条件渲染?基础示例使用逻辑与运算符(&&)使用条件语句列表中的条件渲染总结引言在现代

详解Vue如何使用xlsx库导出Excel文件

《详解Vue如何使用xlsx库导出Excel文件》第三方库xlsx提供了强大的功能来处理Excel文件,它可以简化导出Excel文件这个过程,本文将为大家详细介绍一下它的具体使用,需要的小伙伴可以了解... 目录1. 安装依赖2. 创建vue组件3. 解释代码在Vue.js项目中导出Excel文件,使用第三

Java实现Excel与HTML互转

《Java实现Excel与HTML互转》Excel是一种电子表格格式,而HTM则是一种用于创建网页的标记语言,虽然两者在用途上存在差异,但有时我们需要将数据从一种格式转换为另一种格式,下面我们就来看看... Excel是一种电子表格格式,广泛用于数据处理和分析,而HTM则是一种用于创建网页的标记语言。虽然两

C#使用HttpClient进行Post请求出现超时问题的解决及优化

《C#使用HttpClient进行Post请求出现超时问题的解决及优化》最近我的控制台程序发现有时候总是出现请求超时等问题,通常好几分钟最多只有3-4个请求,在使用apipost发现并发10个5分钟也... 目录优化结论单例HttpClient连接池耗尽和并发并发异步最终优化后优化结论我直接上优化结论吧,

Java后端接口中提取请求头中的Cookie和Token的方法

《Java后端接口中提取请求头中的Cookie和Token的方法》在现代Web开发中,HTTP请求头(Header)是客户端与服务器之间传递信息的重要方式之一,本文将详细介绍如何在Java后端(以Sp... 目录引言1. 背景1.1 什么是 HTTP 请求头?1.2 为什么需要提取请求头?2. 使用 Spr

vue解决子组件样式覆盖问题scoped deep

《vue解决子组件样式覆盖问题scopeddeep》文章主要介绍了在Vue项目中处理全局样式和局部样式的方法,包括使用scoped属性和深度选择器(/deep/)来覆盖子组件的样式,作者建议所有组件... 目录前言scoped分析deep分析使用总结所有组件必须加scoped父组件覆盖子组件使用deep前言

VUE动态绑定class类的三种常用方式及适用场景详解

《VUE动态绑定class类的三种常用方式及适用场景详解》文章介绍了在实际开发中动态绑定class的三种常见情况及其解决方案,包括根据不同的返回值渲染不同的class样式、给模块添加基础样式以及根据设... 目录前言1.动态选择class样式(对象添加:情景一)2.动态添加一个class样式(字符串添加:情

React实现原生APP切换效果

《React实现原生APP切换效果》最近需要使用Hybrid的方式开发一个APP,交互和原生APP相似并且需要IM通信,本文给大家介绍了使用React实现原生APP切换效果,文中通过代码示例讲解的非常... 目录背景需求概览技术栈实现步骤根据 react-router-dom 文档配置好路由添加过渡动画使用