在同一个项目中灵活运用application/json 和application/x-www-form-urlencoded 两种传输格式(配合axios,同时配置loading)
'use strict' import axios from 'axios'
// import qs from 'qs'
import { Notification} from 'element-ui' //使用elementui的提示显示
import { Loading } from 'element-ui'
import router from "../router"; let loading function startLoading() {
loading = Loading.service({
lock: true,
text: '加载中……',
background: 'rgba(0, 0, 0, 0.2)',
})
} function endLoading() {
loading.close()
} let needLoadingRequestCount = 0
export function showFullScreenLoading() {
if (needLoadingRequestCount === 0) {
startLoading()
}
needLoadingRequestCount++
} export function tryHideFullScreenLoading() {
if (needLoadingRequestCount <= 0) return
needLoadingRequestCount--
if (needLoadingRequestCount === 0) {
// setTimeout(()=>{
endLoading()
// },1000)
}
}
axios.interceptors.request.use(config => {
showFullScreenLoading()
return config
}, err => {
return Promise.resolve(err)
}) axios.interceptors.response.use(response => {
tryHideFullScreenLoading()
if (response) {
switch (response.data.code) {
case 4011: //与后台约定登录失效的返回码,根据实际情况处理
sessionStorage.removeItem('');
sessionStorage.removeItem('');
router.replace({
path: '/'
})
}
}
return response
}, err => {
return Promise.resolve(err)
}) let base = '' // 接口地址 export const postRequest = (url, params,Func,isJson) => { //url: 接口名 ,params: 参数 ,Func: 直接取得内容data,isJson:决定取哪种格式
request(url, params,'post',Func,isJson)
}
export const request = (url, params,method,Func,isJson) => {
axios({
method: method,
url: `${base}${url}`,
data: params,
timeout: 6000,
// 格式的转化
transformRequest: [function (data) {
let ret = ''
for (let it in data) {
if(isJson === 1 ){
ret = data[it]
}else{
ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
}
}
return ret
}], // 请求头携带信息,类型默认为form,键值模式,传参为1
headers: {
'Content-Type': isJson === 1 ? 'application/json' : 'application/x-www-form-urlencoded',
'authorization': sessionStorage.getItem(''),
'token': sessionStorage.getItem('token')
}
}).then(data=>{
if (data.data.code === 200) {
Func(data.data.data)
}else if(data.data.code === 406){
Notification.info({
title: '错误',
message: data.data.message
})
}else if(data.data.code === 4011){
sessionStorage.removeItem('');
sessionStorage.removeItem('');
// window.location.href = '/'
}else if(data.data.code === 4012){
request('',{
'authorization': sessionStorage.getItem(''),
'refresh_token': sessionStorage.getItem('')
},'post',(res)=>{
//缓存新的token
console.log(res)
let token = res.token;
sessionStorage.setItem("token", token);
request(url, params,method,Func);
}); }else if(data.data.code === 400 || data.data.code === 505 || data.data.code === 404|| data.data.code === 500){
Notification.error({
title: '错误',
message: '网络异常'
})
}else{
Func1(data.data.code,data.data.message);
}
})
}
export const uploadFileRequest = (url, params) => {
return axios({
method: 'post',
url: `${base}${url}`,
data: params,
headers: {
'Content-Type': 'multipart/form-data', //上传文件的传输格式
'authorization': sessionStorage.getItem('userName'),
'token': sessionStorage.getItem('token')
}
})
}
// 方式1,
export const getRequest = (url, params,Func,isJson) => {
request(url, params,'get',Func,isJson)
} // 方式2
export const getRequest = (url,params,Func) => {
return axios({
method: 'get',
url: `${base}${url}`,
headers: {
'Content-Type': 'multipart/form-data',
'authorization':sessionStorage.getItem(''),
'token':sessionStorage.getItem('token')
}
}).then(data=>{
if (data.data.code === 200) {
Func(data.data.data)
}
})
}
在同一个项目中灵活运用application/json 和application/x-www-form-urlencoded 两种传输格式(配合axios,同时配置loading)的更多相关文章
- 【RocketMQ】同一个项目中,同一个topic,可以存在多个消费者么?
一.问题答案 是不可以的 而且后注册的会替换前注册的,MqConsumer2会替换MqConsumer,并且只结束tag-2的消息 /** * @date 2019/05/28 */ @Compone ...
- django同一个项目中连接多个数据库
一.场景与思路 同一个项目中需要连接多个数据库. 二.代码 代码中主要是三个部分,settings.models以及自己写的一个类. 1.自己写的文件:database_app_router.py ...
- application/json和application/x-www-form-urlencoded区别
application/json和application/x-www-form-urlencoded都是表单数据发送时的编码类型. EncType: enctype 属性规定在发送到服务器之前应该如何 ...
- multipart/form-data,application/json和application/x-www-form-urlencoded区别
application/json和application/x-www-form-urlencoded都是表单数据发送时的编码类型. EncType: enctype 属性规定在发送到服务器之前应该如何 ...
- 在Activity中响应ListView内部按钮的点击事件的两种方法!!!
在Activity中响应ListView内部按钮的点击事件的两种方法 转载:http://www.cnblogs.com/ivan-xu/p/4124967.html 最近交流群里面有人问到一个问题: ...
- Django---Http协议简述和原理,HTTP请求码,HTTP请求格式和响应格式(重点),Django的安装与使用,Django项目的创建和运行(cmd和pycharm两种模式),Django的基础文件配置,Web框架的本质,服务器程序和应用程序(wsgiref服务端模块,jinja2模板渲染模块)的使用
Django---Http协议简述和原理,HTTP请求码,HTTP请求格式和响应格式(重点),Django的安装与使用,Django项目的创建和运行(cmd和pycharm两种模式),Django的基 ...
- QT断点续传(原理:需要在HTTP请求的header中添加Rang节,告诉服务器从文件的那个位置开始传输.格式为bytes 开始传输的位置)
//功能: 根据一个URL地址将数据保存到指定路径下,支持断点续传//参数: url --需要访问的URL地址// SavePath -- ...
- (网页)angular中实现li或者某个元素点击变色的两种方法(转)
转自脚本之家: 本篇文章主要介绍了angular中实现li或者某个元素点击变色的两种方法,非常具有实用价值,需要的朋友可以参考下 本文介绍了angular中实现li或者某个元素点击变色的两种方法,分享 ...
- SQL Server中灾难时备份结尾日志(Tail of log)的两种方法
转自:http://www.cnblogs.com/CareySon/archive/2012/02/23/2365006.html SQL Server中灾难时备份结尾日志(Tail of log) ...
随机推荐
- HTML学习笔记(基础部分)
一.基本概念 1.HTML:超文本标记语言(HyperText Markup Language)是一种用于创建网页的标准标记语言. 2.HTML文档的后缀名:.html 或 .htm 3.标签:由尖括 ...
- nuxt+高德地图实现多边形区域检索
我已经放弃百度地图了,为什么呢? 原因一: 百度地图api太乱不容易查阅 原因二: 百度给出的案例太少,可参考项太少 第三点也是最重要的,百度地图花钱,百度地图花钱,百度地图花钱, 很荣幸,作为国内唯 ...
- React 全新的 Context API
Context API 可以说是 React 中最有趣的一个特性了.一方面很多流行的框架(例如react-redux.mobx-react.react-router等)都在使用它:另一方面官方文档中却 ...
- for循环(foreach型)举例
- AtCoder Beginner Contest 131 F - Must Be Rectangular!
题意:给出二维平面的n个点坐标,定义一种操作:若恰好三个点能形成一个矩形(当然这个矩形会缺了一个点),那么就在图上添加这个缺的点,问在原图上最多能进行几次这样的操作. 解法:这题想了挺久没想到,一看题 ...
- 力扣——gas station (加油站) python实现
题目描述: 中文: 在一条环路上有 N 个加油站,其中第 i 个加油站有汽油 gas[i] 升. 你有一辆油箱容量无限的的汽车,从第 i 个加油站开往第 i+1 个加油站需要消耗汽油 cost[i] ...
- springmvc.xml标配配置
这里提供配置模板[绝不会多余]: <context:component-scan base-package="com.atguigu"></context:com ...
- python3.x current_question
扩散四维过程遇到的问题,暂不能解决,但先收集起来. ''' list_str=['test', None, '', 'str', ' ', 'END'] data = filter(lambda st ...
- 简单的51单片机多任务操作系统(C51)
在网上看到这段代码,所以自己尝试了,可以跑起来,但是没有精确的定时功能,仅仅是任务的调度而已. 数组中是11,而不是12.这里写错了... /* 简单的多任务操作系统 其实只有个任务调度切换,把说它是 ...
- 【leetcode】989. Add to Array-Form of Integer
题目如下: For a non-negative integer X, the array-form of X is an array of its digits in left to right o ...