请求拦截器和响应拦截器参考代码

585 阅读1分钟
导出一个axios的实例  而且这个实例要有请求拦截器 响应拦截器
import axios from 'axios'
const service = axios.create({
   baseURL: 'http://ihrm-java.itheima.net', // 设置axios请求的基础的基础地址
  或者:baseURL: process.env.VUE_APP_BASE_API, // 设置axios请求的基础的基础地址连接环境变量
  timeout: 5000 // 定义5秒超时
}) 
创建一个axios的实例
// service.interceptors.request.use() // 请求拦截器
// service.interceptors.response.use() // 响应拦截器

请求拦截器

service.interceptors.request.use((config) => {
   console.log('请求拦截器', store, config)
  const token = store.state.user.token
  //如果有token就带上
  if (token) {
     //请求头添加token令牌
    config.headers.Authorization = `Bearer ${token}`
  }
 // 操作成功(注意不要写在if语句里了)
  return config
}, error => {
// 返回执行错误 让当前的执行链跳出成功 直接进入 catch
  return Promise.reject(error)
})


响应拦截器

jsservice.interceptors.response.use(response => {
  console.log('所有的响应结果,先到这里', response)
  如果response的success结果为true(和后端约定,不一定是success)
  if (response.data.success) {
  // 操作成功
    return response.data
  } else {
    // 如果success为false 业务出错,直接触发reject
    // 被catch分支捕获
    // Promise.reject() // 生成一个失败状态的Promise
    return Promise.reject(new Error('请求失败'))
  }
},
error => {
// 返回执行错误 让当前的执行链跳出成功 直接进入 catch
  return Promise.reject(error)
}
)

可以参考axios官方文档更详细www.axios-js.com/zh-cn/docs/