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,带请求头和响应头的更多相关文章

  1. HTTP请求头和响应头的格式

    请求头: 请求头肯定带着客户端信息,比如host主机名,User-Agent用户代理信息,Cookie等等  响应头: 响应头带有服务端信息:Server服务器信息,Last-Modified最后修改 ...

  2. Zuul 修改 请求头、响应头 (死磕)

    疯狂创客圈 Java 高并发[ 亿级流量聊天室实战]实战系列 [博客园总入口 ] 架构师成长+面试必备之 高并发基础书籍 [Netty Zookeeper Redis 高并发实战 ] 前言 Crazy ...

  3. Android系列之网络(二)----HTTP请求头与响应头

    ​[声明] 欢迎转载,但请保留文章原始出处→_→ 生命壹号:http://www.cnblogs.com/smyhvae/ 文章来源:http://www.cnblogs.com/smyhvae/p/ ...

  4. HTTP请求的基本概念 HTTP请求头和响应头的含义

    1,HTTP请求的基本概念    TCP/UPD/HTTP    *2,HTTP请求头和响应头的含义  请求头:  Accept: text/html,image/*(浏览器可以接收的类型)  Acc ...

  5. (二)----HTTP请求头与响应头

    一.HTTP头引入: 正确的设置HTTP头部信息有助于搜索引擎判断网页及提升网站访问速度.通常HTTP消息包括:客户机向服务器的请求消息和服务器向客户机的响应消 息.客户端向服务器发送一个请求,请求头 ...

  6. Android Http请求头与响应头的学习

    本节引言: 上节中我们对Android涉及的网络编程进行了了解,也学习了下Http的基本概念,而本节我们 要学习的是Http的请求头与响应头,当然,可以把也可以把这节看作文档,用到的时候来查查 即可! ...

  7. [面试没答上的问题1]http请求,请求头和响应头都有什么信息?

    最近在找工作,面试官问了一些问题自己并没有回答上,这里做一个小结. http请求,请求头和响应头都有什么信息? 页面和服务器交互最常见的方式就是ajax,ajax简单来说是浏览器发送请求到服务端,然后 ...

  8. HTTP请求头与响应头(转载)

    欢迎转载,但请保留文章原始出处→_→ 生命壹号:http://www.cnblogs.com/smyhvae/ 文章来源:http://www.cnblogs.com/smyhvae/p/400503 ...

  9. http请求头和响应头详细解释

    想对http请求头和响应头有更细致的了解,请看如下 Requests部分 Header 解释 示例 Accept 指定客户端能够接收的内容类型 Accept: text/plain, text/htm ...

  10. HTTP请求头和响应头

      这篇文章简单总结一下HTTP请求头和响应头,并举一些web开发中响应头的用例. 1. HTTP请求头 accept:浏览器通过这个头告诉服务器,它所支持的数据类型.如:text/html, ima ...

随机推荐

  1. .Net反射-基础2-BindingFlags参数

    BindingFlags参数用于指定反射查找的范围在调用下列方法时会用到BindingFlags参数 // 调用方法. InvokeMethod // 创建实例. CreateInstance // ...

  2. 洛谷p1902刺杀大使题解

    题目传送门 方法:二分答案+dfs 二分一个mid,此次刺杀的最大伤害,作为判断条件来dfs,二分,更新. 我们二分一个答案mid来表示一个界限,如果当前这个格子的伤害代价比mid小则可以走否则就不走 ...

  3. 题解 洛谷 P2010 【回文日期】

    By:Soroak 洛谷博客 知识点:模拟+暴力枚举 思路:题目中有提到闰年然后很多人就认为,闰年是需要判断的其实,含有2月29号的回文串,前四位是一个闰年那么我们就可以直接进行暴力枚举 一些小细节: ...

  4. nginx lnmp之nginx+php

    配置如下(在server部分添加): location ~ \.php$ { include fastcgi_params; fastcgi_pass unix:/tmp/php-fcgi.sock; ...

  5. 第02组 Alpha冲刺(2/6)

    队名:無駄無駄 组长博客 作业博客 组员情况 张越洋 过去两天完成了哪些任务 任务分配.进度监督 提交记录(全组共用) 接下来的计划 沟通前后端成员,监督.提醒他们尽快完成各自的进度 还剩下哪些任务 ...

  6. Web中线程与IIS线程池自动回收机制

    开发Web项目后,部署到 IIS上 ,运行一直稳定,当Web程序中加入了定时任务,或者线程之类的机制后,第二天发现悲催了,定时任务并没有执行,此时重新登录一下网站,定时任务又重新执行.原来IIS默认有 ...

  7. Hyperledger Fabric 1.4 快速环境搭建

    自己的硕士研究方向和区块链有关,工程上一直以IBM的Hyperledger Fabric为基础进行开发,对该项目关注也有两年了.目前迎来了Hyperledger Fabric v1.4,这也是Fabr ...

  8. 【python学习案例】python判断自身是否正在运行

    需要引入psutil包: 实现思路: 1)用os.getpid()获取当前程序运行PID,将PID存入文件中 2)用psutil模块获取当前系统所有正在运行的pid 3)读取之前存入的PID,判断该P ...

  9. c# winform richtextbox控制每行颜色 + 滚动条始终滚动到最底部

    /// <summary> /// 输出 /// </summary> /// <param name="content"></param ...

  10. 【C/C++开发】C++11 并发指南三(std::mutex 详解)

    本系列文章主要介绍 C++11 并发编程,计划分为 9 章介绍 C++11 的并发和多线程编程,分别如下: C++11 并发指南一(C++11 多线程初探)(本章计划 1-2 篇,已完成 1 篇) C ...