在vue项目中,和后台进行数据交互使用axios。要想统一处理所有的http请求和响应,就需要使用axios的拦截器。通过配置http response inteceptor 统一拦截后台的接口数据,针对异常的情况可以做统一拦截处理。

项目背景:vue+vuex+elementUI进行开发

axios详细说明手册:https://www.kancloud.cn/yunye/axios/234845

1、安装axios

npm install --save axios

2、在src/utils目录下,新建一个fetch.js文件,用于专门写axios的统一拦截操作。(具体路径存放已经文件名自定义)

  在fetch.js文件中,引入axios、element-ui的部分元素、引入vuex中的store、另外在引入其他相关的方法,例如获取token的方法

import axios from 'axios';
import { Message, MessageBox } from 'element-ui';
import store from '../store';
import { getToken } from 'utils/auth';
// 创建axios实例
const service = axios.create({
// baseURL: process.env.BASE_API, // api的base_url
timeout: 60000 // 请求超时时间,1分钟
}); // request拦截器
service.interceptors.request.use(config => {
// Do something before request is sent
if (store.getters.token) {
config.headers['Authorization'] = getToken(); // 让每个请求携带token--['X-Token']为自定义key 请根据实际情况自行修改
}
return config;
}, error => {
Promise.reject(error);
}) // respone拦截器
service.interceptors.response.use(
response => {
/**
* 下面的注释为通过response自定义code来标示请求状态,当code返回如下情况为权限有问题,登出并返回到登录页
* 如通过xmlhttprequest 状态码标识 逻辑可写在下面error中
*/ const res = response.data;
if (response.status === 401 || res.status === 40101) {
MessageBox.confirm('你已被登出,可以取消继续留在该页面,或者重新登录', '确定登出', { confirmButtonText: '重新登录', cancelButtonText: '取消', cancelButtonClass: 'calBtnClass', type: 'warning' }).then(() => {
store.dispatch('FedLogOut').then(() => {
location.reload(); // 为了重新实例化vue-router对象 避免bug
});
})
return Promise.reject('error');
} if (res.status === 40001) {
Message({ message: '账户或密码错误!', type: 'warning' });
return Promise.reject('error');
} if (response.status !== 200 && res.status !== 200) { //此处并不能拦截全部异常情况,因为res是后台接口返回的数据,有一些由于不规范,没有带status属性,导致没有被拦截
Message({ message: res.message, type: 'error', duration: 6 * 1000 });
} else {
//只有成功后,才可以进行操作
return response.data;
}
},
error => {
Message({
message: error.message,
type: 'error',
duration: 6 * 1000
});
return Promise.reject(error);
}
); export default service;

以上代码,是一个完整的axios统一拦截配置处理。

额外话:

在学习axios的时候,对于defaults是很迷惑,有一些写法是axios.defaults.XXX。在了解以后,才知道axios的执行顺序是:默认值,实例默认值,参数设置值

//设置默认值,设置默认超时时间为6000ms
axios.defaults.timeout="6000" //创建实例,设置默认超时时间为8000ms
const instance = axios.create();
instance.defaults.timeout= 8000 //请求,设置具体请求超时时间
instance.get('/url',{
timeout:1000*10
})

3、fetch.js配置完成以后,在调用请求的文件引入该文件即可

  例如:本人习惯的写法是把所有的请求方法写到一个js文件中,页面需要调用的时候,在import该文件。

  例如,在src/login.js文件中,存放和登录有关的全部请求方法,并在改文件中引入fetch.js

import fetch from 'utils/fetch';

//修改密码
export function editPwsFun(obj,timeout) {
return fetch({
url: '/api/admin/user/current/updatePassword',
method: 'post',
data: obj,
timeout
})
}
//查询当前登录用户信息
export function getCurUserInfo() {
return fetch({
url: '/api/admin/user/current/user',
method: 'get',
});
}
//修改当前用户信息
export function editCurUInfo(obj) {
return fetch({
url: '/api/admin/user/current/updateUser',
method: 'post',
data: obj
})
} // 执行登录
export function loginByEmail(username, password) {
const data = { username, password};
return fetch({
url: '/api/auth/jwt/token',
method: 'post',
data
});
} // logout注销
export function logout(token) {
return fetch({
url: '/api/auth/jwt/invalid',
method: 'post',
params: { token }
});
} // 获取用户信息
export function getInfo(token) {
return fetch({
url: '/api/admin/user/front/info',
method: 'get',
params: { token }
});
}

4、接口文件完成以后,在vue文件中直接引入,并调用该方法即可。

<script>
import {editPwsFun, editCurUInfo, getCurUserInfo } from '../../api/login';
export default {
methods: {
updateUserInfo() {
getCurUserInfo().then(resopnse=> {
if (resopnse.status==200) {
this.formUInfo=resopnse.data;
this.dialogUInfoVisible = true;
} else {
this.dialogUInfoVisible=false;
  }
  })
  }
  }
  }
</script>

axios统一拦截配置的更多相关文章

  1. axios interceptors 拦截 , 页面跳转, token 验证 Vue+axios实现登陆拦截,axios封装(报错,鉴权,跳转,拦截,提示)

    Vue+axios实现登陆拦截,axios封装(报错,鉴权,跳转,拦截,提示) :https://blog.csdn.net/H1069495874/article/details/80057107 ...

  2. Vue+axios统一接口管理

    通过axios请求接口已经很简单了,但最近在做一个vue项目,想着把axios请求再封装一下,这样api就可以只在一处配置成方法,在使用的时候直接调用这个方法. 但咱们不用每个接口都定义成一个啰嗦的a ...

  3. axios统一封装

    本文代码参考了网上别人的资料,经过修改而来 /** * Created by zxf on 2017/9/6. * 封装统一的ajax请求,统一拦截请求,对不同的请求状态封装 * 通常说, ajax ...

  4. token回话保持,axios请求拦截和导航守卫以及token过期处理

    1:了解token:有时候大家又说token令牌.整个机制是前端第一次登陆发送请求,后端会根据前端的用户名和密码, 通过一些列的算法的到一个token令牌, 这个令牌是独一无二的,前端每次发送请求都需 ...

  5. Axios的默认配置(碎片知识)API

    axios API axios(config) axios({ method: 'Post', url: '/user/123', data: { //略 } }) axios(url[, confi ...

  6. Axios的详细配置和相关使用

    Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中. Features 从浏览器中创建 XMLHttpRequests 从 node.js 创建 http  ...

  7. axios请求,拦截器的使用

    1. axios 创建请求 import axios from 'axios' import {Message} from 'element-ui' import router from " ...

  8. axios的拦截器(Interceptors)

    axios 的拦截器:interceptors 如果我们想在请求之前做点什么,用拦截器再好不过了 拦截器一般做什么? 1. 修改请求头的一些配置项 2. 给请求的过程添加一些请求的图标 3. 给请求添 ...

  9. axios请求拦截器

    import axios from 'axios';   // 创建axios实例   let service = null;   if (process.env.NODE_ENV === 'deve ...

随机推荐

  1. Mark一下:成为CSDN博客专家

    距第一篇博客(发表于2015.08.13)已有差不多7个月,还记得当时受一个基友的启发,觉得要总结写作些什么,于是磕磕碰碰写出第一篇博客,坚持写作至今,穿梭于CSDN.简书.知乎和作业部落等门户网站, ...

  2. annotation配置springMVC的方法了事务不起作用

    Spring MVC 和spring context 父子容器关系http://www.121ask.com/thread-5471-1.html 父上下文容器中保存数据源.服务层.DAO层.事务的B ...

  3. openstack通过Network Namespace和iptables实现租户私有网络互訪和L3路由功能

    安装架构介绍 本文旨在通过自己搭建类似neutron (openvswitch + gre) 实现SDN 的环境,学习了解其工作原理,模拟核心原理.比方:同一租户自己定义网络 instance 互通, ...

  4. C# 中使用 Obsolete 标志 代码过期

    今天对项目做了一次更新,创建了一个新的类来替换原来的工作. 可是又不想删掉.一旦删掉在SVN上就不存在了.决定还是用 Obsolete来标志代码过期吧. MSDN上关于Obsolete 标签的介绍 h ...

  5. hdu 5410 CRB and His Birthday 01背包和全然背包

    #include<stdio.h> #include<string.h> #include<vector> #include<queue> #inclu ...

  6. Android实现能够揉动的图片

    public class Demo01 extends Activity{ private Bitmap bitmap = null; @Override protected void onCreat ...

  7. c2

    #include <stdio.h> int main() { // 整型常量 ; // 实型常量(小数) // 单精度float / 双精度double // 注意: 默认情况下编写的小 ...

  8. USACO 1.4 Mother's Milk

    Mother's Milk Farmer John has three milking buckets of capacity A, B, and C liters. Each of the numb ...

  9. ios中去除tableView的分割线

     self.tableView.separatorStyle = UITableViewCellSeparatorStyleNone;

  10. Redis安装到Windows系统

    redis官方没有windows版本,在windows下安装需要单独去找.地址:https://github.com/MSOpenTech/redis/releases.本文用的是Redis-x64- ...