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 提供的导航守卫主要用来通过跳转或取消的方式守卫导航.(在路由跳转时 ...
随机推荐
- 对于大型公司项目平台选择j2ee的几层认识
我是一个从野路子上一路走来的程序员,现在主要用.net做方案.选.net不选jave并没有什么特别的原因,只不过是因为我自己从c,java学起,后来被vs这个工具所吸引, 很熟悉这个平台罢了,从业15 ...
- ext3 转 ext4 操作
先关闭相关服务 cd / umount /dev/vg_nosql/nosql tune2fs -O has_journal,extents,huge_file,flex_bg,uninit_bg,d ...
- eclipse直接使用tomcat安装程序的webapp目录调试
感谢此文:http://blog.csdn.net/soszou/article/details/23673133 本文很多技术及操作来源于此文 需求:因为微信方面的开发调试.为了测试方便,直接构建了 ...
- Python学习---Model拾遗[2]180318
Model的字段及字段参数: Model字段: 数字 字符串(带正则的字段) 时间 文件 特殊字段:(一对一,一对多,多对多) Models.py ...
- php读取大文件如日志文件
需求如下: 现有一个1G左右的日志文件,大约有500多万行, 用php返回最后几行的内容. 1. 直接采用file函数来操作 or file_get_content() 肯定报内存溢出注: 由于 fi ...
- Directed Graphs
有向图 Introduction 就是边是有方向的,像单行道那样,也有很多典型的应用. 点的出度指从这个点发出的边的数目,入度是指向点的边数.当存在一条从点 v 到点 w 的路径时,称点 v 能够到达 ...
- java冒泡排序-选择排序-插入排序-使用API中文文档直接调用函数
import java.util.Arrays; public class ArrayDemo2_3 { public static void main(String []args) { //---- ...
- IDEA 常用插件收藏
1.maven helper 查看maven依赖,解决jar包冲突. 2.Alibaba Java Coding Guidelines 代码风格遵循阿里java规范. 3.Lombok 简化实体中的 ...
- Failed to read Class-Path attribute from manifest of jar file:/XXX问题
java.lang.IllegalStateException: Failed to read Class-Path attribute from manifest of jar file:/XXX ...
- webview综述
nWebView 是webkit最核心的一个view,WebView管理WebFrameView和WebFrame之间的交互,一个WebView对象绑定一个window,并且要求MainFrame加载 ...