axios拦截器——基本用法及拦截器代码

之前在开发后台管理系统时，都是跟其他同事一起开发，说实在点，就是在别人开发的基础上写页面。。。

现在想把之前没有关注的点拾起来。。

今天看下axios拦截器的用法

用vue写代码在做ajax请求时，可以用到axios，具体就相当于请求前进行校验(拦截)和响应前进行校验(拦截).

什么是axios

axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端。简单的理解就是ajax的封装

它本身具有以下特征：

1. .从浏览器中创建 XMLHttpRequest
2. 从 node.js 发出 http 请求
3. 支持 Promise API
4. 拦截请求和响应
5. 转换请求和响应数据
6. 取消请求
7. 自动转换JSON数据
8. 客户端支持防止CSRF/XSRF

axios官网地址：https://www.npmjs.com/package/axios

npm安装方法：

$ npm install axios


axios用法

1.在src目录下创建一个js文件并引入axios

import axios from 'axios'; //引入axios
//下面的两个不一定要引入，看项目在拦截时需要做什么操作，一般都是需要引入store的，因为可以拿到用户的登录信息
import store from '@/store/index';//引入store
import router from '@/router';//引入router


2.创建一个axios实例

let instance = axios.create({
headers:{
'content-type':'application/x-www-form-urlencoded'
}
})


3.编写请求拦截器

这个拦截器会在你发送请求之前运行，此处请求拦截器的功能是：每次请求前去判断是否有token，如果token存在则在请求头加上这个token,后台会判断这个token是否过期。

// http request拦截器
instance.interceptors.request.use(
cOnfig=>{
const token = localStorage.getItem('token');//此处用这个localStorage 也可以用store，因为一般登录后都会将登录信息存储到vuex中，但是如果不存储到localsStorage的话，当前页面刷新时，vuex中的内容会消失。
if(token){
config.headers.authorization = token //请求头加上token
}
return config
},err=>{
return Promise.reject(err);
}
)


4.编写响应拦截器

这个拦截器会在拿到后台接口返回的数据后，进行响应处理。比如数据正确返回是code是200，如果code是500,则需要拦截一下。

instance.interceptors.response.use(
respOnse= {
//拦截响应，做统一处理
if(response.data.code){
switch(response.data.code){
case 1002:
store.state.isLogin = false;//store中有个isLogin表示登录状态，这个视具体情况而定
router.replace({
path:'login',
query:{
redirect:router.currentRoute.fullPath
}
})
}
}
return response
},
//接口错误状态处理，也就是说无响应时的处理
error =>{
return Promise.reject(error.response.status);//接口返回的错误信息
}
)


5.导出实例

export default instance


6.axios的使用

在接口对应的js文件中，使用axios,比如login.js登录相关的接口

import axios from './axios'
/* 验证登录 */
export function handleLogin(data){
return axios.post('/user/login',data)
}


在登录页面就可以直接引入login.js，然后使用handleLogin即可。

下面附录一个我第一份vue前端工作时，大神的代码：

import axios from 'axios';
import router from '@/router/routers';
import {Notification,MessageBox,Loading} from 'element-ui';
import store from '../store'
import {getToken} from '@/utils/auth'
import Config from '@/setting'
var qs = require('qs')//qs主要是用于处理formData的数据
//创建 axios实例
const service = axios.create({
baseURL:process.env.NODE_ENV ==='production'?process.env.VUE_APP_BASE_API:'/',//api的base_url
timeout:Config.timeout //请求时间
})
let loadingInstance
//request拦截器
service.interceptors.request.use(
cOnfig=>{
if(getToken()){
config.headers['Authorization'] = getToken() //让每个请求携带自定义的token，请根据实际情况自行修改
}
config.headers['Content-Type'] = 'application/json'
//这个headers头部的Content-Type：一般都是application/json,但是也有部分接口需要传递的是formData格式的，此时就需要用到qs，为了做区分，在config参数中添加一个type变量来进行判断处理
if(config.type && config.type == 'form'){
config.headers['Content-Type'] = 'application/x-www-form-urlencoded'
if(config.data){
config.data = qs.stringify(config.data);
}
}
if(config.loading){
loadingInstance = Loading.service({fullscreen:true})
}
return config
},
error =>{
console.log(error);
Promise.reject(error);
}
)
//response拦截器
service.interceptors.response.use(
respOnse=>{
const code = response.status
if(code<200 ||code>300){
Notification.error({
title:response.message
})
if(loadingInstance){
loadingInstance.close();
}
return Promise.reject('error')
}else{
if(loadingInstance){
loadingInstance.close();
}
return response.data
}
},
error =>{
let code = 0
try{
code = error.response.data.status
}catch(e){
if(error.toString().indexOf('Error:timeout') !==-1){
Notification.error({
title:"网络请求超时",
duration:5000
})
return Promise.reject(error)
}
}
if(code){
if(code==401){
MessageBox.confirm(
'登录状态已过期，您可以继续留在该页面，或者重新登录',
'系统提示',
{
confirmButtonText:'重新登录'，
cancelButtonText:'取消',
type:'warning'
}
).then(()=>{
store.dispatch('Login').then(()=>{
location.reload();//为了重新实例化vue-router对象
})
})
}else if(code==405){
router.push({path:'/401'})
}else{
const errorMsg = error.response.data.message
if(errorMsg !== undefined){
Notification.error({
title:errorMsg,
duration:5000
})
}
}
}else{
Notification.error({
title:'接口请求失败',
duration:5000
})
}
return Promise.reject(error)
}
)
export default service


接口文件的内容：

import request from '@/utils/request'
//get请求的写法：
export function getShopList(data, loading) {
// eslint-disable-next-line no-return-assign
return get('api/shop/list', data, loading)
}
//post请求的写法：
export function modifyAdmin(data) {
return request({
url: 'api/shop/modify/admin',
method: 'post',
data
})
}
//formData格式的post请求的写法：
export function verify(data) {
return request({
type: 'form',
url: 'api/shop/verify',
method: 'post',
data
})
}


vue页面中使用接口的部分内容：

import { verify } from '@/api/shop'
...
methods:{
verify(this.verifyObj).then(res => {
....
}).catch(error => {
...
})
}