vue axios拦截器的封装
// request.js
import axios from 'axios'
import qs from 'qs' // 创建axios实例
const service = axios.create({
timeout: 10000, // 请求超时时间
transformrequest: data => qs.stringify(data)
})
// request拦截器
service.interceptors.request.use(
config => {
config.headers['X-Requested-With'] = 'XMLHttpRequest'
config.headers['X-Platform'] = window.__wxjs_environment === 'miniprogram' ? 'MiniProgram' : 'H5'
return config
},
error => ({ status: 0, msg: error.message })
) // respone拦截器
service.interceptors.response.use(
response => {
const res = response
if (response.status === 200) {
switch (res.status) {
case 0: // 错误并提示
if (!response.config.errorSelf) {
//
}
return { data: res.data, msg: res.msg, status: false }
case 1: // 成功返回数据
return { data: res.data, msg: res.msg, status: true }
case -1: // 暂不进行任何操作
return { data: res.data, status: false }
default: return { data: res.data, status: true }
}
}
return { data: response.data, status: false }
},
error => {
console.log('err' + error) // for debug
switch (error.request.status) {
case 401: // 无权限访问,需要登录
return Promise.reject ? Promise.reject(error) : error
case 500: // 请求接口错误
if (error.config.linkError) {
//
}
return Promise.reject ? Promise.reject(error) : error
}
return Promise.reject ? Promise.reject(error) : error
}
) export default service
调用:
import request from '@/utils/request' /**
* 登录
*/
export function login (data) {
return request({
url: '/sqlapi/login',
method: 'post',
data: {
username: data.username,
password: data.password
}
})
}
vue axios拦截器的封装的更多相关文章
- vue axios拦截器 + 自编写插件 实现全局 loading 效果;
项目需求:用自定义的 .gif 图标实现全局 loading 效果:为避免在每个页面手动添加,且简单高效的实现,经查阅资料,最终采用了 vue axios拦截器 + 自编写 loading 插件:下面 ...
- 对于vue中axios拦截器简单封装
axios.interceptors.response.use( response => { // 如果返回的状态码为200,说明接口请求成功,可以正常拿到数据 // 否则的话抛出错误 if ( ...
- vue axios 拦截器
前言 项目中需要验证登录用户身份是否过期,是否有权限进行操作,所以需要根据后台返回不同的状态码进行判断. 第一次使用拦截器,文章中如有不对的地方还请各位大佬帮忙指正谢谢. 正文 axios的拦截器分为 ...
- vue --- axios拦截器+form格式请求体
在vue2.x中使用CLI生成的模板有很大改变,需要自己手动在main.ts同级目录下新建interceptors.ts interceptors.ts import axios from 'axio ...
- vue axios拦截器介绍
关于axios的拦截器是一个作用非常大,非常好用的东西.分为请求拦截器和响应拦截器两种.我一般把拦截器写在main.js里. 1. 请求拦截器 请求拦截器的作用是在请求发送前进行一些操作,例如在每个请 ...
- vue axios拦截器加全局loading
import axios from 'axios' import util from './util' import {showFullScreenLoading, tryHideFullScreen ...
- Vue2学习小记-给Vue2路由导航钩子和axios拦截器做个封装
1.写在前面 最近在学习Vue2,遇到有些页面请求数据需要用户登录权限.服务器响应不符预期的问题,但是总不能每个页面都做单独处理吧,于是想到axios提供了拦截器这个好东西,再于是就出现了本文. 2. ...
- Vue基于vuex、axios拦截器实现loading效果及axios的安装配置
准备 利用vue-cli脚手架创建项目 进入项目安装vuex.axios(npm install vuex,npm install axios) axios配置 项目中安装axios模块(npm in ...
- vue导航守卫和axios拦截器的区别
在Vue项目中,有两种用户登录状态判断并处理的情况,分别为:导航守卫和axios拦截器. 一.什么是导航守卫? vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航.(在路由跳转时 ...
随机推荐
- zabbix共享内存报错cannot create semaphore set
zabbix共享内存报错 cannot open log: cannot create semaphore set: [28] No space left on device 报错原因: kernel ...
- css3圆形光环闪烁效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 三年Linux运维工作总结教训
Linux运维一定要知道的六类好习惯和23个教训,避免入坑! 从事运维三年半,遇到过各式各样的问题,数据丢失,网站挂马,误删数据库文件,黑客攻击等各类问题. 今天简单整理一下,分享给各位小伙伴. 一. ...
- winform ComboBox控件反选
winform ComboBox控件反选:int index = comboBox1.FindString(textBox2.Text); comboBox1.SelectedIndex = inde ...
- 沉淀再出发:kafka初探
沉淀再出发:kafka初探 一.前言 从我们接触大数据开始,可能绕在耳边的词汇里面出现的次数越来越多的就包括kfaka了.kafka的设计初衷是希望作为一个统一的信息收集平台,能够实时的收集反馈信息, ...
- Excel英语成绩单
- January 11 2017 Week 2nd Wednesday
One always has time enough, if one will apply it well. 如果你能好好地利用,你总有足够的时间. If you always feel that y ...
- [Assignment] C++2
作业要求:PAT1025 翻转链表 代码在这里
- Foj 2296 Alice and Bob(博弈、搜索)
Foj 2296 Alice and Bob 题意 两个人博弈,规则如下:轮流取0~9中的数字,最后Alice所得的数字个数为1~n中,数位在Alice所取集合中出现奇数次的. 双方想获得尽量多,问A ...
- APPLICATION FAILED TO START
Description: Cannot determine embedded database driver class for database type NONE Action: If you w ...