当前位置：首页 > news >正文

axios请求拦截器

news 2025/8/6 7:43:22

在vue项目中，通常使用axios与后台进行数据交互，axios是一款基于promise封装的库，

axios特性：

1、axios 是一个基于promise的HTTP库，支持promise所有的API
2、浏览器端/node端（服务器端）都可以使用，浏览器中创建XMLHttpRequests
3、支持请求／响应拦截器
4、它可以转换请求数据和响应数据，并对响应回来的内容自动转换成 JSON类型的数据
5、批量发送多个请求
6、安全性更高，客户端支持防御XSRF

使用场景

通常在出现请求数多的情况下，我们将会用到 axios 的一个API：拦截器。
页面发送http请求，很多情况我们要对请求和其响应进行特定的处理，
如果每个请求都附带后端返回的token，我们需要在拿到response之前loading动画的展示等。

拦截器分为请求（request）拦截器和响应（response）拦截器。

import axios from 'axios'
import {serialize} from '@/util'
import {getStore} from '@/util/store'
import NProgress from 'nprogress' // progress bar
import errorCode from '@/const/errorCode'
import router from '@/router/router'
import {Message, MessageBox} from 'element-ui'
import 'nprogress/nprogress.css'
import qs from 'qs'
import store from '@/store' // progress bar style
axios.defaults.timeout = 60000  // 默认值是30000
// 返回其他状态吗
axios.defaults.validateStatus = function (status) {return status >= 200 && status <= 500 // 默认的
}
// 跨域请求，允许保存cookie
axios.defaults.withCredentials = true
// NProgress Configuration
NProgress.configure({showSpinner: false
})// HTTPrequest拦截
axios.interceptors.request.use(config => {NProgress.start() // start progress barconst TENANT_ID = getStore({name: 'tenantId'})const isToken = (config.headers || {}).isToken === falseconst token = store.getters.access_tokenif (token && !isToken) {config.headers['Authorization'] = 'Bearer ' + token// token}if (TENANT_ID) {config.headers['TENANT-ID'] = TENANT_ID // 租户ID}// headers中配置serialize为true开启序列化if (config.method === 'post' && config.headers.serialize) {config.data = serialize(config.data)delete config.data.serialize}if (config.method === 'get') {config.paramsSerializer = function (params) {return qs.stringify(params, {arrayFormat: 'repeat'})}}return config
}, error => {return Promise.reject(error)
})// HTTPresponse拦截
axios.interceptors.response.use(res => {console.log('res',res)NProgress.done()const status = Number(res.status) || 200const message = res.data.msg || errorCode[status] || errorCode['default']// 后台定义 424 针对令牌过去的特殊响应码if (status === 424) {MessageBox.confirm('令牌状态已过期，请点击重新登录', '系统提示', {confirmButtonText: '重新登录',cancelButtonText: '取消',type: 'warning'}).then(() => {store.dispatch('LogOut').then(() => {// 刷新登录页面，避免多次弹框window.location.reload()})}).catch(() => {});return}// 处理 500 网络异常if (status === 500) {Message({message: '服务器异常！',type: 'error'})return Promise.reject(new Error(message))}if (status !== 200 || res.data.code === 1) {Message({message: message,type: 'error'})return Promise.reject(new Error(message))}return res
}, error => {// 处理 503 网络异常if (error.response.status === 503) {Message({message: error.response.data.msg,type: 'error'})}NProgress.done()return Promise.reject(new Error(error))
})export default axios