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 提供的导航守卫主要用来通过跳转或取消的方式守卫导航.(在路由跳转时 ...
随机推荐
- 利用dotnet restore 导入本地 .nupkg 包
dotnet restore 主要是用于部署.net core 项目中所需的依赖库,集成了nuget包管理软件.因此,dotnet restore 实际上就是根据project.json(今后可能为p ...
- ExpressRoute 常见问题
什么是 ExpressRoute? ExpressRoute 是一项 Azure 服务,允许在 Microsoft 数据中心与本地环境或共同租用设施中的基础结构之间创建专用连接. ExpressRou ...
- java笔记--正则表达式的运用(包括电话,邮箱验证等)
正则表达式 --如果朋友您想转载本文章请注明转载地址"http://www.cnblogs.com/XHJT/p/3877402.html "谢谢-- 正则表达式符号:" ...
- C# 托管非托管资源释放
1.C#几乎所有对象都为托管对象,不同点是有的对象封装了非托管资源. 2.C#大部分对象在进行垃圾回收时都可以回收,包括非托管资源,因为非托管资源都已经通过C#类进行了封装,会将非托管资源的释放放在析 ...
- 【最强】微软Tech Summit 2017动手实验室教程
[最强]微软Tech Summit 2017动手实验室教程 原创 2017-11-07 MSPrecious MSPrecious成长荟 这是! 你绝对找不到的教程! Ignite2016的教程你找到 ...
- January 05 2017 Week 1st Thursday
The true nobility is in being superior to your previous self. 真正的高贵在于超越过去的自己. I will be satisfied if ...
- ZT 蓝牙的AVDTP协议笔记
我的电子杂烩饭 http://blog.sina.com.cn/wuchuchu2012 [订阅][手机订阅] 首页 博文目录 图片 关于我 个人资料 Tifnan Qing 微博 加好友 发纸条 写 ...
- Chapter 3 Top 10 List
3.1 Introduction Given a set of (key-as-string, value-as-integer) pairs, then finding a Top-N ( wher ...
- IDEA中配置Scala开发编译环境
安装JDK 因为Scala是运行在JVM平台上的,所以安装Scala之前要安装JDK. 安装Scala Windows安装Scala编译器 访问Scala官网http://www.scala-lang ...
- HashMap源代码解析
HashMap原理剖析 之前有看过别人的HashMap源代码的分析,今天尝试自己来分析一波,纯属个人愚见.听一些老的程序员说过,当别人跟你说用某样技术到项目中去,而你按照别人的想法实现了的时候,你只能 ...