封装axios,带请求头和响应头
import axios from "axios";
import qs from "qs"; //处理参数
import router from '../router'; //引入路由
import { Loading , Message} from 'element-ui'; let loading = null; //开始加载动画
function openLoading(){
loading = Loading.service({
lock:true,
text:'拼命加载中...',
background:'rgba(0,0,0,.7)'
});
} //关闭加载动画
function closeLoading(){
loading.close();
} //添加请求拦截器
axios.interceptors.request.use(
config => {
//加载动画
openLoading()
if(localStorage.sessionId){ //如果我的sessionId存在(sessionId其实就是token)
// 设置统一的请求header
config.headers.Authorization = localStorage.sessionId //授权(每次请求把sessionId带给后台)
}
return config;
},
error => {
return Promise.reject(error);
}
); //添加响应拦截器
axios.interceptors.response.use(
response => {
//逻辑处理
if(response.data.errorCode == -){ //后端反回的状态值,本应该errorCode是status
Message({
type:'warning',
duration:,
showClose: true,
message:'当前登录已失效,请从新登录!'
})
router.push("/logon")//让用户从新回到登录页面
}
return response;
},
error => {
closeLoading() //请求超时清除加载动画
return Promise.resolve(error.response);
}
); axios.defaults.baseURL = "http://10.26.41.181:8081/nei"; // 开发 axios.defaults.headers.post["Content-Type"] = "application/json";
axios.defaults.headers.post["X-Requested-With"] = "XMLHttpRequest";
axios.defaults.timeout = ; //设置请求超时时间 function checkStatus(response) {
return new Promise((resolve, reject) => {
if(response && (response.status === || response.status === || response.status === )){
try{
closeLoading() //关闭加载动画
}catch(e){
//抛出异常
console.log(e)
}
resolve(response.data);
}else{
try{
closeLoading() //关闭加载动画
}catch(e){
//抛出异常
console.log(e)
}
Message({
type:'error',
showClose: true,
message:'网络异常,请检查网络连接是否正常!'
})
}
});
}
export default {
post(url, params) {
return axios({
method: "post",
url,
data: params
}).then(response => {
return checkStatus(response);
});
},
get(url, params) {
params = qs.stringify(params);
return axios({
method: "get",
url,
params
}).then(response => {
return checkStatus(response);
});
}
};
使用:在main.js里面引入这个文件,并挂载到vue原型上,这样可以通过this.xxxx去拿到
import axios from './api/api.js' //引入axios文件夹
Vue.prototype.$axios = axios; //挂载到整个Vue原型上
axios 的使用:在需要请求的页面如下引用
//post请求
this.$axios.post('url',{key:value}).then(res =>{
cons.log(res,'后端返回数据')
})
//get请求
this.$axios.get('url?key=value').then(res =>{
cons.log(res,'后端返回数据')
})
封装axios,带请求头和响应头的更多相关文章
- HTTP请求头和响应头的格式
请求头: 请求头肯定带着客户端信息,比如host主机名,User-Agent用户代理信息,Cookie等等 响应头: 响应头带有服务端信息:Server服务器信息,Last-Modified最后修改 ...
- Zuul 修改 请求头、响应头 (死磕)
疯狂创客圈 Java 高并发[ 亿级流量聊天室实战]实战系列 [博客园总入口 ] 架构师成长+面试必备之 高并发基础书籍 [Netty Zookeeper Redis 高并发实战 ] 前言 Crazy ...
- Android系列之网络(二)----HTTP请求头与响应头
[声明] 欢迎转载,但请保留文章原始出处→_→ 生命壹号:http://www.cnblogs.com/smyhvae/ 文章来源:http://www.cnblogs.com/smyhvae/p/ ...
- HTTP请求的基本概念 HTTP请求头和响应头的含义
1,HTTP请求的基本概念 TCP/UPD/HTTP *2,HTTP请求头和响应头的含义 请求头: Accept: text/html,image/*(浏览器可以接收的类型) Acc ...
- (二)----HTTP请求头与响应头
一.HTTP头引入: 正确的设置HTTP头部信息有助于搜索引擎判断网页及提升网站访问速度.通常HTTP消息包括:客户机向服务器的请求消息和服务器向客户机的响应消 息.客户端向服务器发送一个请求,请求头 ...
- Android Http请求头与响应头的学习
本节引言: 上节中我们对Android涉及的网络编程进行了了解,也学习了下Http的基本概念,而本节我们 要学习的是Http的请求头与响应头,当然,可以把也可以把这节看作文档,用到的时候来查查 即可! ...
- [面试没答上的问题1]http请求,请求头和响应头都有什么信息?
最近在找工作,面试官问了一些问题自己并没有回答上,这里做一个小结. http请求,请求头和响应头都有什么信息? 页面和服务器交互最常见的方式就是ajax,ajax简单来说是浏览器发送请求到服务端,然后 ...
- HTTP请求头与响应头(转载)
欢迎转载,但请保留文章原始出处→_→ 生命壹号:http://www.cnblogs.com/smyhvae/ 文章来源:http://www.cnblogs.com/smyhvae/p/400503 ...
- http请求头和响应头详细解释
想对http请求头和响应头有更细致的了解,请看如下 Requests部分 Header 解释 示例 Accept 指定客户端能够接收的内容类型 Accept: text/plain, text/htm ...
- HTTP请求头和响应头
这篇文章简单总结一下HTTP请求头和响应头,并举一些web开发中响应头的用例. 1. HTTP请求头 accept:浏览器通过这个头告诉服务器,它所支持的数据类型.如:text/html, ima ...
随机推荐
- 04-C#笔记-数据类型转化
支持强制类型转换. 常用的转化函数如下: 1 ToBoolean如果可能的话,把类型转换为布尔型. 2 ToByte把类型转换为字节类型. 3 ToChar如果可能的话,把类型转换为单个 Unicod ...
- 关于ID命名 一个页面唯一
1.一般ID在一个区域内必须是唯一的.这样是一个规范而且在IE中使用JS通过ID获取这个对象永远只能获取第一个. 2.js无法找到重复的ID,用js获取时,只能得到第一个ID元素,但,如果不同的区域范 ...
- USACO Chocolate Giving
洛谷 P2984 [USACO10FEB]给巧克力Chocolate Giving 洛谷传送门 JDOJ 2680: USACO 2010 Feb Silver 2.Chocolate Giving ...
- Taro,实现小程序在样式文件中导入背景图片
https://taro-docs.jd.com/taro/docs/static-reference.html 注意点是,控制你的图片大小,然后配置完limit后,把dist删掉,重新运行 npm ...
- OpenResty: 介绍 (摘抄)
原文链接:https://www.cnblogs.com/duanxz/p/10396160.html Nginx 是俄罗斯人发明的, Lua 是巴西几个教授发明的,中国人章亦春把 LuaJIT VM ...
- fping 命令说明
参数: -a 表示只在输出报告⾥列出当前存活的IP -d 解析主机名 -f 参数表示读⼊这个文件 -s 显示汇总信息 -g 指定⽹网段
- kali linux 更换镜像源
编辑sources.list文件 leafpad /etc/apt/sources.list #aliyun 阿里云 deb http://mirrors.aliyun.com/kali kali-r ...
- 第02组 团队Git现场编程实战
目录 1. 组员职责分工(2分) 2. github 的提交日志截图(1分) 3. 程序运行截图(3分) 4. 程序运行环境(1分) 5. GUI界面(5分) 6. 基础功能实现(10分) 7. 鼓励 ...
- Java 并发系列之三:java 内存模型(JMM)
1. 并发编程的挑战 2. 并发编程需要解决的两大问题 3. 线程通信机制 4. 内存模型 5. volatile 6. synchronized 7. CAS 8. 锁的内存语义 9. DCL 双重 ...
- Spring Security教程之退出登录logout(十)
要实现退出登录的功能我们需要在http元素下定义logout元素,这样Spring Security将自动为我们添加用于处理退出登录的过滤器LogoutFilter到FilterChain.当我们指定 ...