// 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. CoolViewPager:即刻刷新,自定义边缘效果颜色,双向自动循环,内置垂直切换效果,想要的都在这里

    这两天在GitHub上传了一个自定义ViewPager:CoolViewPager,具有以下功能特征: 支持水平及垂直方向循环滚动 支持自动滚动 支持自动滚动方向.滚动时间.间隔时间的设置 支持调用n ...

  2. QTableview 获取鼠标坐标的item(QModelIndex)

    要实现的功能是QTableview中Item项上右键弹出菜单这就必然要判断点击右键时鼠标指针是否在QTableView的Item上 如果是QTableWidget可以用itemAt来判断QTableV ...

  3. sequelize 学习之路

    如果你觉得Sequelize的文档有点多.杂,不方便看,可以看看这篇. 在使用NodeJS来关系型操作数据库时,为了方便,通常都会选择一个合适的ORM(Object Relationship Mode ...

  4. switch结构可以更好的解决等值判断问题

    switch 选择结构的语法:switch (表达式){case 常量 1://代码块1:break;case 常量 2://代码块2:break;......default://代码块n:break ...

  5. 第一个c程序和vs2017 在打开MFC rc文件时找不到rcdll.dl

    第一个c程序 #include<stdio.h> int main() { ; ; printf_s("请输入两个数字:"); scanf_s("%d,%d& ...

  6. Python学习---列表/元组/字典/字符串/set集合/深浅拷贝1207【all】

    1.列表 2.元组 3.字典 4.字符串 5.set集合 6.深浅拷贝

  7. 淘宝NPM镜像源

    npm install -g cnpm --registry=https://registry.npm.taobao.org

  8. linux setup 相关text mode图形配置工具的安装

    centos 6.4 x86_64 minimal安装后发现setup命令不可用 yum update yum install setup 安装完了还是不可用,不知为什么,难道装的那个包不对?yum ...

  9. JavaScript的DOM_动态加载脚本和样式

    一.动态加载脚本 当网站需求变大,脚本的需求也逐步变大.我们就不得不引入太多的 JS 脚本而降低了整站的性能,所以就出现了动态脚本的概念,在适时的时候加载相应的脚本. 1.动态加载js文件 比如:我们 ...

  10. Voronoi图及matlab实现

    [题外话:想一想真是...美赛时我预测求爱尔兰的充电站位置分布,画Voronoi图,程序跑了一个小时...]   Voronoi图,又叫泰森多边形或Dirichlet图,它是由一组由连接两邻点直线的垂 ...