Vue2.x中axios 拦截器

目录

1.配置请求拦截器

1.1请求拦截器-Token认证和展示Loading效果

 2.配置响应拦截器

2.1配置响应拦截器

2.2响应拦截器 – 请求完后关闭 Loading 效果

---

拦截器 （英文：Interceptors）会在 每次发起 ajax 请求 和 得到响应 的时候自动被触发。

应用场景：

① Token 身份认证

② Loading 效果

③ etc…

1.配置请求拦截器

通过 axios.interceptors.request.use(成功的回调, 失败的回调) 可以配置请求拦截器。

注意： 失败的回调函数可以被省略 ！

axios.interceptors.request.use(config => {
//业务逻辑
  return config
}, error => {
//业务逻辑
  return Promise.reject(error)
})

1.1请求拦截器-Token认证和展示Loading效果

借助于 element ui 提供的 Loading 效果 组件（https://element.eleme.cn/#/zh-CN/component/loading） 可以方便的实现 Loading 效果的展示

//按需导入elementui的组件Loading
import { Loading } from 'element-ui'
import axios from 'axios'

// 配置请求拦截器-
axios.interceptors.request.use(config => {
  // 展示loading效果
  Loading.service({ fullscreen: true })
  // 配置token认证
  config.headers.Authorization = 'Bearer xxx'
  console.log(config)
  /* 固定写法return回去 */
  return config
})

无Token认证的请求头header：

 有Token认证的请求头header：（带Bearer ）

 2.配置响应拦截器

2.1配置响应拦截器

通过 axios.interceptors.response.use(成功的回调, 失败的回调) 可以配置响应拦截器。

注意：失败的回调函数可以被省略！

axios.interceptors.response.use(response => {
//业务逻辑
  return response
}, error => {
//业务逻辑
  return Promise.reject(error)
})

2.2响应拦截器 – 请求完后关闭 Loading 效果

调用 Loading 实例提供的 close() 方法即可关闭 Loading 效果，

// 配置响应拦截器
axios.interceptors.response.use(response => {
  // 关闭loading效果
  Loading.service({ fullscreen: true }).close()
  return response
})