// 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拦截器的封装的更多相关文章

  1. vue axios拦截器 + 自编写插件 实现全局 loading 效果;

    项目需求:用自定义的 .gif 图标实现全局 loading 效果:为避免在每个页面手动添加,且简单高效的实现,经查阅资料,最终采用了 vue axios拦截器 + 自编写 loading 插件:下面 ...

  2. 对于vue中axios拦截器简单封装

    axios.interceptors.response.use( response => { // 如果返回的状态码为200,说明接口请求成功,可以正常拿到数据 // 否则的话抛出错误 if ( ...

  3. vue axios 拦截器

    前言 项目中需要验证登录用户身份是否过期,是否有权限进行操作,所以需要根据后台返回不同的状态码进行判断. 第一次使用拦截器,文章中如有不对的地方还请各位大佬帮忙指正谢谢. 正文 axios的拦截器分为 ...

  4. vue --- axios拦截器+form格式请求体

    在vue2.x中使用CLI生成的模板有很大改变,需要自己手动在main.ts同级目录下新建interceptors.ts interceptors.ts import axios from 'axio ...

  5. vue axios拦截器介绍

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

  6. vue axios拦截器加全局loading

    import axios from 'axios' import util from './util' import {showFullScreenLoading, tryHideFullScreen ...

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

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

  8. Vue基于vuex、axios拦截器实现loading效果及axios的安装配置

    准备 利用vue-cli脚手架创建项目 进入项目安装vuex.axios(npm install vuex,npm install axios) axios配置 项目中安装axios模块(npm in ...

  9. vue导航守卫和axios拦截器的区别

    在Vue项目中,有两种用户登录状态判断并处理的情况,分别为:导航守卫和axios拦截器. 一.什么是导航守卫? vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航.(在路由跳转时 ...

随机推荐

  1. 常见网络编程面试题答案征集与面试题(收集) ZZ 【网络编程】

    http://www.cnblogs.com/wickedboy237/archive/2013/05/12/3074362.html 1:tcp和udp的区别2:流量控制和拥塞控制的实现机制3:滑动 ...

  2. Linux案例01:eth0网卡异常

    一.现象描述 今天在调试两台物理机,做完配置重启主机后,发现一台服务器网络无法ssh连接,通过ILO进去ifconfig发现eth0配置的IP地址等信息丢失,手动重启后,可以ssh连接,但过一段时间, ...

  3. 点开无线显示"已连接 安全",但是点击下面无线图标却显示"无法连接internet",解决方案

    管理员权限运行“命令提示符” 输入:netsh winsock reset 然后重启电脑即可

  4. 杀windows进程

    1.首先是启动windows的命令窗口,按键盘上的windows+R,然后在输入框中输入cmd,既可以启动命令窗口 2.进入windows命令窗口之后,输入命令,输入netstat -ano然后回车, ...

  5. [EffectiveC++]item24:若所有参数皆需类型转换,请为此采用non-member函数

    Declare non-member functions when type conversions should apply to all parameters. 104页 只有当参数被列于参数列( ...

  6. iOS自动化-- 常用iOS命令

    iOS命令: 获取设备的的UDID idevice_id --list # 显示当前所连接设备的 udid instruments -s devices # 列出所有设备,包括真机.模拟器.mac i ...

  7. Homebrew 安装 MySQL

    安装 Homebrew brew doctor 确认 brew 在正常工作 brew update 更新包 brew install mysql 安装 MySQL ​ ==> Downloadi ...

  8. Radix Sorts

    基数排序 Strings In Java Char Data Type C 语言中的字符数据类型占一个字节(8 比特),最多只能表示 256 个字符.支持 7 位的标准 ASCII(American ...

  9. 自学PHP有哪些书籍和教程值得推荐?

    知乎上看到一题主询问:"自学PHP有哪些书籍和教程值得推荐?",互联网深度屌丝秦风给出了不错的答案,希望能够帮助自学PHP的朋友们. 以下仅供参考: 尤其不认可W3school之类 ...

  10. H3C笔试题目

    最近这段时间正在找工作,去H3C做了下笔试题,题目出的还不错,比一般公司水平高上一点点,偷偷弄了点回来,分享一下,我把答案和解析全部整理了出来,有需要的可以看看. 1.以下描述正确的有(AD) A.1 ...