Vue前端面试题总结（九）Axios拦截详解

Axios拦截

axios拦截分为请求式拦截跟响应式拦截

• request请求拦截器：发送请求前统一处理，如：设置请求头headers等。
• response响应拦截器：有时候我们要根据响应的状态码来进行下一步操作

Axios请求式拦截

axios.interceptors.request.use(config => {
    
    
  config.interceptors = '请求拦截器'
  return config
}, function(error) {
    
    
 
})

Axios响应式拦截

// http response 拦截器
instance.interceptors.response.use(
  response => {
    
    
    //拦截响应，做统一处理 
    if (response.data.code) {
    
    
      switch (response.data.code) {
    
    
        case 1002:
          store.state.isLogin = false
          router.replace({
    
    
            path: 'login',
            query: {
    
    
              redirect: router.currentRoute.fullPath
            }
          })
      }
    }
    return response
  },
  //接口错误状态处理，也就是说无响应时的处理
  error => {
    
    
    return Promise.reject(error.response.status) // 返回接口返回的错误信息
  })