vue--axios分装
封装:
import axios from 'axios'
axios.defaults.baseURL="http://127.0.0.1:8000/"
axios.defaults.timeout = 1000000;
axios.defaults.headers.post['Content-Type'] = 'application/json';
axios.defaults.headers.put['Content-Type'] = 'application/json'; axios.interceptors.request.use(
config => {
// 每次发送请求之前判断是否存在token,如果存在,则统一在http请求的header都加上token,不用每次请求都手动添加了
const token = sessionStorage.getItem("jwt_token")
console.log(token)
if (token){
config.headers.Authorization = 'JWT '+ token
}
return config;
},
error => {
return Promise.error(error);
}) axios.interceptors.response.use(
// 请求成功
res => res.status === 200 ? Promise.resolve(res) : Promise.reject(res), // 请求失败
error => {
if (error.response) {
// 判断一下返回结果的status == 401? ==401跳转登录页面。 !=401passs
console.log(error.response)
if(error.response.status===401){
// 跳转不可以使用this.$router.push方法、
// this.$router.push({path:'/login'})
window.location.href="http://127.0.0.1:8080/#/login"
}else{
// errorHandle(response.status, response.data.message);
return Promise.reject(error.response);
}
// 请求已发出,但是不在2xx的范围
} else {
// 处理断网的情况
// eg:请求超时或断网时,更新state的network状态
// network状态在app.vue中控制着一个全局的断网提示组件的显示隐藏
// 关于断网组件中的刷新重新获取数据,会在断网组件中说明
// store.commit('changeNetwork', false);
return Promise.reject(error.response);
}
}); // 封装xiaos请求 封装axios里的get
export function axios_get(url,params){
return new Promise(
(resolve,reject)=>{
axios.get(url,{params:params})
.then(res=>{
console.log("封装信息的的res",res)
resolve(res.data)
}).catch(err=>{
reject(err.data)
})
}
)
} export function axios_post(url,data){
return new Promise(
(resolve,reject)=>{
console.log(data)
axios.post(url,JSON.stringify(data))
.then(res=>{
console.log("封装信息的的res",res)
resolve(res.data)
}).catch(err=>{
reject(err.data)
})
}
)
} export function axios_put(url,data){
return new Promise(
(resolve,reject)=>{
console.log(data)
axios.put(url,JSON.stringify(data))
.then(res=>{
console.log("封装信息的的res",res)
resolve(res.data)
}).catch(err=>{
reject(err.data)
})
}
)
} export function axios_delete(url,data){
return new Promise(
(resolve,reject)=>{
console.log(data)
axios.delete(url,{params:data})
.then(res=>{
console.log("封装信息的的res",res)
resolve(res.data)
}).catch(err=>{
reject(err.data)
})
}
)
}
http.js
导出使用:
import {axios_get,axios_post,axios_delete,axios_put} from './http.js'
export const jwt_send_get = p => axios_get("/appjwt/index01/",p)
api.js
vue--axios分装的更多相关文章
- vue axios 取消上次请求
axios.defaults.timeout = 1000 * 5axios.defaults.baseURL = baseUrlvar CancelToken = axios.CancelToken ...
- vue axios拦截器 + 自编写插件 实现全局 loading 效果;
项目需求:用自定义的 .gif 图标实现全局 loading 效果:为避免在每个页面手动添加,且简单高效的实现,经查阅资料,最终采用了 vue axios拦截器 + 自编写 loading 插件:下面 ...
- vue axios使用form-data的形式提交数据的问题
vue axios使用form-data的形式提交数据vue axios request payload form data由于axios默认发送数据时,数据格式是Request Payload,而并 ...
- VUE AXIOS 跨域问题
背景: 后台跨域使用通配符:context.Response.Headers.Add("Access-Control-Allow-Origin", "*"); ...
- vue axios 总结篇
1.npm --save 和 --save-dev 有什么区别 发布到线上的叫生产环境~,在本地开发的时候叫开发环境,--save就是会打包到线上去并且在线上环境能用到的,比如你npm install ...
- 基于Vue + axios + WebApi + NPOI导出Excel文件
一.前言 项目中前端采用的Element UI 框架, 远程数据请求,使用的是axios,后端接口框架采用的asp.net webapi,数据导出成Excel采用NPOI组件.其业务场景,主要是列表页 ...
- vue+axios新手实践实现登陆
vue+axios新手实践实现登陆 https://segmentfault.com/a/1190000015201803 增加 利用HTML5的history.replacestate()修改当前页 ...
- vue+axios+elementUI文件上传与下载
vue+axios+elementUI文件上传与下载 Simple_Learn 关注 0.5 2018.05.30 10:20 字数 209 阅读 15111评论 4喜欢 6 1.文件上传 这里主要 ...
- axios interceptors 拦截 , 页面跳转, token 验证 Vue+axios实现登陆拦截,axios封装(报错,鉴权,跳转,拦截,提示)
Vue+axios实现登陆拦截,axios封装(报错,鉴权,跳转,拦截,提示) :https://blog.csdn.net/H1069495874/article/details/80057107 ...
- Vue+axios(interceptors) 实现http拦截 + router路由拦截 (双拦截)+ 请求自带loading效果
axios interceptors 拦截器 //interceptors.js // vue axios配置 发起请求加载loading请求结束关闭loading // http request 请 ...
随机推荐
- Servlet学习笔记(二)
目录 Servlet学习笔记(二) Request对象 1.request和response对象: 2.request对象继承体系结构: 3.什么是HttpServletRequest ? 4.Htt ...
- 剑指Offer-Python(11-15)
11.二进制中1的个数 链接:https://www.nowcoder.com/questionTerminal/8ee967e43c2c4ec193b040ea7fbb10b8?answerType ...
- 【转载】VirtualBox 扩展增强包安装
1 扩展包作用 鼠标可自动在虚拟机和物理机中切换状态,而不用按快捷键解除独占功能 安装了扩展包后,可以解决 virtualbox 中 更改 ubuntu 分辨率无效的问题 2 原文地址 星朝 - Vi ...
- [MIT6.006] 12. Square Roots, Newton's Method 平方根,牛顿法
首先让我们回顾下上节课讲的,用牛顿法计算√2的内容: 简单来说,牛顿法从x0=1不断向后计算逼近√2的值,而刚开始计算的精度是1,随着牛顿法的逼近(共log2d个循环),就能使得√2逼近值的精度达到d ...
- #paragma详解
#Pragma是预处理指令,它的作用是设定编译器的状态或者是指示编译器完成一些特定的动作.#Pragma指令对每个编译器给出了一个方法,在保持与C和C++语言完全兼容的情况下,给出主机或操作系统 ...
- UNP——第五章,TCP客户/服务程序
tcpser void str_echo(int sockfd) { long arg1, arg2; ssize_t n; char line[MAXLINE]; for ( ; ; ) { if ...
- 理解 ASP.NET Core: 处理管道
理解 ASP.NET Core 处理管道 在 ASP.NET Core 的管道处理部分,实现思想已经不是传统的面向对象模式,而是切换到了函数式编程模式.这导致代码的逻辑大大简化,但是,对于熟悉面向对象 ...
- Qt QPainter画个球啊
Qt QPainter画个球啊 目录 Qt QPainter画个球啊 看效果 方法 代码 看效果 方法 使用绘图事件,绘制一个图形 使用定时事件,不停更新图形位置 代码 .h #pragma once ...
- Linux内核剖析——操作系统的启动
一.总体功能 1.从通电到BIOS跳转 1.1 CPU在通电后,先进入实模式,设置CS=0XFFFF,IP = 0X0000(指向BIOS) 1.2 BIOS进行执行系统监测,并且在地址=0处初始化中 ...
- 讲武德,你们要的高性能日志工具 Log4j2,来了
Log4j 介绍过了,SLF4J 介绍过了,Logback 也介绍过了,你以为日志系列的文章就到此终结了? 不不不,我告诉你,还有一个 Log4j 2,顾名思义,它就是 Log4j 的升级版,就好像手 ...