import axios from 'axios'
import Qs from 'qs' // 超时设置
const service = axios.create({
transformRequest: [function (data) {
data = Qs.stringify(data);
return data;
}],
// 请求超时时间
timeout: 5000 ,
}); //对,就是用qs对aixos进行全局设置,之后在首页引入这个封装好的aixos就好了,传给后台都是类似form的形式
2、这里补充一下,用拦截器给请求头加token
// http request 拦截器
// 每次请求都为http头增加Authorization字段,其内容为token
service.interceptors.request.use(
config => {
let cancel
config.cancelToken = new CancelToken(function executor(c) {
cancel = c;
})
var token = Cookies.get('token');
config.headers.token = token
if(token != undefined){
Auth.setLoginStatus()
}
stopRepeatRequest(config.url, cancel)
return config
},
err => {
return Promise.reject(err);
}
);
3、针对返回来的数据进行拦截,这里进行权限判断,没权限或者页面不对,就跳到404
// http response 拦截器
// 针对响应代码确认跳转到对应页面
service.interceptors.response.use(
response => {
for( let i = 0; i < requestList.length; i++){
if(requestList[i] == response.config.url){
// 注意,不能保证500ms必定执行,详情请了解JS的异步机制
requestList.splice(i,1)
//异步删除有问题
// setTimeout(function(){
// requestList.splice(i,1)
// console.log(requestList,'执行删除了=================')
// }, 100) break
}
}
return Promise.resolve(response.data)
},
error => {
if(axios.isCancel(error)){
return Promise.reject("Ajax Abort: 该请求在axios拦截器中被中断")
} else if (error.response) {
switch (error.response.status) {
case 401:
router.push('error/401');
case 403:
router.push('error/403');
default:
Message({
message: `服务器错误!错误代码:${error.response.status}`,
type: 'error'
})
}
return Promise.reject(error.response.data)
}
}
);

axios实现类似form传值的格式,以及实现拦截器功能,response拦截实现权限判断的更多相关文章

  1. vue cli+axios踩坑记录+拦截器使用,代理跨域proxy(更新)

    16319 1.首先axios不支持vue.use()方式声明使用,看了所有近乎相同的axios文档都没有提到这一点建议方式 在main.js中如下声明使用 import axios from 'ax ...

  2. vue cli+axios踩坑记录+拦截器使用,代理跨域proxy

    1.首先axios不支持vue.use()方式声明使用,看了所有近乎相同的axios文档都没有提到这一点 建议方式 在main.js中如下声明使用 import axios from 'axios'; ...

  3. axios踩坑记录+拦截器使用+vue cli代理跨域proxy+webpack打包部署到服务器

    1.小小的提一下vue cli脚手架前端调后端数据接口时候的本地代理跨域问题,如我在本地localhost访问接口http://40.00.100.100:3002/是要跨域的,相当于浏览器设置了一道 ...

  4. 使用Typescript重构axios(十四)——实现拦截器

    0. 系列文章 1.使用Typescript重构axios(一)--写在最前面 2.使用Typescript重构axios(二)--项目起手,跑通流程 3.使用Typescript重构axios(三) ...

  5. axios 源码解析(下) 拦截器的详解

    axios的除了初始化配置外,其它有用的应该就是拦截器了,拦截器分为请求拦截器和响应拦截器两种: 请求拦截器    ;在请求发送前进行一些操作,例如在每个请求体里加上token,统一做了处理如果以后要 ...

  6. 利用Struts拦截器限制上传图片的格式和大小

    在这之前 Struts的一个核心功能就是大量的拦截器,既然是框架,那么自然也就贴心地为我们准备好了各种常用的功能,比如这里即将讨论的如何限制上传图片的格式和大小.那么既然是使用Struts已经写好的拦 ...

  7. Vue2学习小记-给Vue2路由导航钩子和axios拦截器做个封装

    1.写在前面 最近在学习Vue2,遇到有些页面请求数据需要用户登录权限.服务器响应不符预期的问题,但是总不能每个页面都做单独处理吧,于是想到axios提供了拦截器这个好东西,再于是就出现了本文. 2. ...

  8. axios请求、返回拦截器

    1.http 请求拦截器 axios.interceptors.request.use(function(config){ //在发送请求之前做些什么 return config }), functi ...

  9. vue axios拦截器介绍

    关于axios的拦截器是一个作用非常大,非常好用的东西.分为请求拦截器和响应拦截器两种.我一般把拦截器写在main.js里. 1. 请求拦截器 请求拦截器的作用是在请求发送前进行一些操作,例如在每个请 ...

随机推荐

  1. 白底黑字!Android浅色状态栏黑色字体模式(另)

    小彬什么都想做任重致远 关注 2016.06.30 10:16* 字数 489 阅读 3234评论 3喜欢 12 前言 由于该死不死的设计湿,设计了一套白色状态栏的UI.当然在iOS上可以实现自适应, ...

  2. Vue 集成easyUI

    原 Vue 集成easyUI https://blog.csdn.net/m0_37948170/article/details/84960320   参考vue官网用cli创建了Vue项目之后: n ...

  3. 《O’Reilly精品图书系列共21册》azw3

    套装书目: <机器学习:实用案例解析> <利用Python进行数据分析> <社交网站的数据挖掘与分析(原书第2版)> <社会网络分析:方法与实践> &l ...

  4. CH12 动态内存

    动态分配的对象的生命期与它们在哪里创建的五官,只有显示地释放时,这些对象才被销毁 静态内存用来保存局部static对象.类static数据成员以及定义在任何函数之外的变量,栈内存用来保存定义在函数内的 ...

  5. 前端面试题CSS一(题目来源网络)

    一.什么是html5语义化? 使用合理,正确的html标签格式化文档. 二.CSS样式优先级? 就近原则,行内>内联>外联 三 什么是盒模型? 主要分为两种,w3c标准盒模型,IE标准模型 ...

  6. 有关《查找两个List中的不同元素》的问题解答与编程实践

     郑海波 2013-07-08 问题: 有List<String> list1和List<String> list2,两个集合各有上万个元素,怎样查找两个集合中不同的元素呢? ...

  7. 织梦 dede runphp=yes SQL语句操作

    个人实例dede:channelartlist 下循环出 channel 栏目 中的 文章 {dede:sql sql='select * from dede_arctype where reid = ...

  8. ffmpeg 学习:002-代码架构

    前言 使用 ffmpeg 库时,最好先理解好ffmpeg的代码结构图. 下面这张图表明了FFmpeg在解码一个视频的时候的函数调用流程,为了保证结构清晰,其中仅列出了最关键的函数,剔除了其它不是特别重 ...

  9. 小程序真机上报错 for developer: some selectors are not allowed in component wxss , including tag name selectors, id selectors, and attribute selectors

    for developer: some selectors are not allowed in component wxss , including tag name selectors, id s ...

  10. redis学习记录1 特性与优点

    1.存储结构:字符串.散列.列表.集合.有序集合. redis存储结构的优势:数据在redis中的储存方式和其在程序中的储存方式相近:redis对不同数据类型提供非常方便的操作方式,如使用集合类型储存 ...