// 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. sql查询学习和实践点滴积累

    https://blog.rjmetrics.com/2008/10/28/correlated-subqueries-in-mysql/ http://www.mysqltutorial.org/m ...

  2. CC150相关问题

    18.9 动态计算中位数 利用两个堆:一个最大堆,存放小于中位数的值:一个最小堆,存放大于中位数的值. 则两个堆的堆顶即为数组中最中间的两个数. 在插入新元素的时候,我们只要维护两个堆, 使其堆中元素 ...

  3. 将csv导出json格式

    将csv导出json格式 import os,csv,json cf = open('D:\OneDrive\\Tech\\Script\\Powershell_Script\\Uxin_work\\ ...

  4. ORA-28001:口令已经失效

    Oracle11G创建用户时缺省密码过期限制是180天(即6个月),如果超过180天用户密码未做修改则该用户无法登录. 查看密码的有效期设置,LIMIT字段是密码有效天数. select * from ...

  5. 【2017-11-08】Linux与openCV:opencv版本查看及库文件位置等

    1. 查看当前系统中opencv的版本: pkg-config --modversion opencv 可以看到系统中目前存在opencv2.4.9.1及opencv3.2.0两个版本. 不太清楚op ...

  6. XML序列化 System.Xml.Serialization

    一.定义元数据 XML序列化常用属性:XMLRoot,XMlType.XMLText.XMLEnum等 [Serializable] [XmlRoot] public class Product { ...

  7. c++计算器后续(3)

    自娱自乐: 本来只是想改改第二次的代码规范的,然后好像把原来的代码玩坏了,真是尴尬...然后大概是又发现了一些东西.以上. main的参数: 大概是说main函数的括号里是可以带参数的,写成这个样子: ...

  8. Vmstat主要关注哪些数据?

    除特殊情况外,一般关注飘红部分 任务的信息(procs) r(running) 在internal时间段里,运行队列中的进程数,即表示正在运行或者正在等待CPU时间的进程数,如果这个参数值超过服务器上 ...

  9. Centos7 之目录处理命令(八)

    linux中 关于目录 有几个重要概念 一个是 / 根目录  还有一个当前用户的家目录 比如 root用户的家目录是 /root  普通用户的家目录是/home/xxx 下 root登录 默认家目录 ...

  10. [USACO09MAR]Sand Castle

    嘟嘟嘟 太水了,大佬们就绕道吧…… 就是m, b数组分别排个序,然后更改对应位置的m[i]和b[i],就行了. 因为如果m[i]不改为b[i]而是b[i + 1]的话,那么必定要将m[j] (j &g ...