vue2.0中axios拦截详细说明

最新推荐文章于 2025-05-17 13:58:26 发布

原创最新推荐文章于 2025-05-17 13:58:26 发布 · 532 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #axios

vue 同时被 2 个专栏收录

7 篇文章

订阅专栏

axios

1 篇文章

订阅专栏

本文介绍如何在Vue项目中配置Axios并利用其请求及响应拦截器功能提升用户体验，通过设置全局的Loading提示与错误消息处理，实现统一的数据获取流程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近项目中用vue全家桶实现，避免不了使用axios，axios不仅可以用来请求数据，沟通前后端的作用，还有以下的http请求拦截作用、http响应拦截作用。

/**
 * http配置
  */
 // 引入axios以及element ui中的loading和message组件
 import axios from 'axios'
 import { Loading, Message } from 'element-ui'
 // 超时时间
 axios.defaults.timeout = 5000
 // http请求拦截器
 var loadinginstace
 axios.interceptors.request.use(config => {
   // element ui Loading方法
   loadinginstace = Loading.service({ fullscreen: true })
   return config
 }, error => {
   loadinginstace.close()
   Message.error({
     message: '加载超时'
   })
   return Promise.reject(error)
 })
 // http响应拦截器
 axios.interceptors.response.use(data => {// 响应成功关闭loading
   loadinginstace.close()
   return data
 }, error => {
   loadinginstace.close()
   Message.error({
     message: '加载失败'
   })
   return Promise.reject(error)
 })

 export default axios

我们可以单独建立一个http的js文件处理axios，再到main.js中引入，这样便于维护。