axios封装全局loading

一个页面如果有多个请求，最好不要用全局loading。

【有的人居然会提出要封装全局loading，我也是服了】

关键代码如下

完整代码如下。

说明：请求拦截中，config中的loadingHide和loadingText都是请求实例传过来的参数

import axios from 'axios'
import Cookies from 'js-cookie'
import router from '@/router'
import qs from 'qs'
import { clearLoginInfo } from '@/utils'
import isPlainObject from 'lodash/isPlainObject'
import {Loading
} from 'element-ui';const http = axios.create({baseURL: window.SITE_CONFIG['apiURL'],timeout: 1000 * 180,withCredentials: true
})/*** 模拟一个出入栈*/
let loadingInstance = null; // 记录页面中存在的loading
let loadingCount = 0; // 记录当前正在请求的数量function showLoading(data) {if (loadingCount === 0) {loadingInstance = Loading.service({lock: true,text: data || '加载中……'});}loadingCount++
};function hideLoading() {loadingCount--if (loadingInstance && loadingCount === 0) {loadingInstance.close()loadingInstance = null}
}/*** 请求拦截*/
http.interceptors.request.use(config => {if (!config.loadingHide) {//有的请求隐藏loadingshowLoading(config.loadingText)}config.headers['Accept-Language'] = Cookies.get('language') || 'zh-CN'config.headers['token'] = Cookies.get('token') || ''// 默认参数var defaults = {}// 防止缓存，GET请求默认带_t参数if (config.method === 'get') {config.params = {...config.params,...{ '_t': new Date().getTime() }}}if (isPlainObject(config.params)) {config.params = {...defaults,...config.params}}if (isPlainObject(config.data)) {config.data = {...defaults,...config.data}if (/^application\/x-www-form-urlencoded/.test(config.headers['content-type'])) {config.data = qs.stringify(config.data)}}return config
}, error => {return Promise.reject(error)
})/*** 响应拦截*/
http.interceptors.response.use(response => {if (!response.config.loadingHide) {//有的请求需要隐藏loadinghideLoading()}if (response.data.code === 401 || response.data.code === 10001) {clearLoginInfo()router.replace({ name: 'login' })return Promise.reject(response.data.msg)}return response
}, error => {if (!error.config.loadingHide) {//有的请求需要隐藏loadinghideLoading()}console.error(error)return Promise.reject(error)
})export default {get: (path, data, config) =>instance.get(path, {params: data,...config}),post: (path, data, config) => instance.post(path, data, config),put: (path, data, config) => instance.put(path, data, config),delete: (path, data, config) =>instance.delete(path, {data,...config})
}

axios封装全局loading相关推荐

同时多个axios请求_用 React+Antd 封装 Axios 实现全局 Loading 效果
前言今天在做 react 后台管理的时候要实现一个全局 Loading 效果,通常使用 axios 库与后端进行数据交互.为了更好的用户体验,在每次请求前添加一个加载效果,让用户知道在等待加载. 要 ...
axios post body参数_Vue开发中的一些问题（axios封装）
关于Vue开发的问题(axios封装) 在博客中查找vue的axios封装,发现其中案例还是很多的,自己项目中有些需求不够. 比如 1.Content-Type 请求头 application/x-w ...
vite + vue3 + 封装axios + 封装loading + 封装返回顶部
前言前期回顾 vite + vue3 + ts配置<企业级项目>二次封装el-table.分页_0.活在风浪里的博客-CSDN博客封装的功能有哪些?分页.表格排序.文字居中. ...
axios中并发、继发请求的全局loading设置
前言项目中,全局loading一般是在整体内容区域进行展示,项目在调用接口的时候展示,接口调用完成后隐藏,防止在页面接口请求过程中用户进行意料之外的操作.这次就是对loading的一个处理过程项目 ...
axios vue 加载效果动画_vue+axios+element ui 实现全局loading加载示例
实现全局loading加载分析需求,我们只需要在请求发起的时候开始loading,响应结束的时候关闭loading,就这么简单对不对? import axios from 'axios'; imp ...
vue中axios封装请求
执行 GET 请求 // 向具有指定ID的用户发出请求 axios.get('/user?ID=12345') .then(function (res) {console.log(res); }) . ...
在vue项目中使用axios封装axios
基本使用安装 // 项目中安装 npm install axios --S // cdn 引入 <script src="https://unpkg.com/axios/dist/a ...
axios封装，api接口封装统一管理
axios封装,api接口封装统一管理一. axios说明 Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中. axios的封装和api接口的统一管理, ...
vue-cli4+vant+rem+sass+vuex+axios封装+webpack搭建移动端项目
h5移动端项目模板基于 vue-cli4.0 + webpack 4 + vant ui + sass+ rem 适配方案+axios 封装,构建手机端模板脚手架启动项目 git clone ht ...
vue axios封装以及登录token过期跳转问题
Axios配置JWT/封装插件/发送表单数据首先请务必已仔细阅读 Axios 文档并熟悉 JWT: 中文文档 JWT 中文文档安装 npm install axios npm install es ...

axios封装全局loading

axios封装全局loading相关推荐

最新文章

热门文章