在我们发送请求的时候会进行一些拦截处理,在响应数据的时候也会进行一些拦截处理。

1.全局代码

// 1.导入axios
import axios from 'axios'
import { Message } from 'element-ui'
import Store from '@/store'
import Router from '@/router'

// 2.创建axios副本
const _axios = axios.create({
  baseURL: process.env.VUE_APP_BASE_API
})
// 3.请求拦截器
_axios.interceptors.request.use(
  (config) => {
    if (Store.state.user.token) {
      config.headers.Authorization = `Bearer ${Store.state.user.token}`
    }
    return config
  },
  (error) => {
    return Promise.reject(error)
  }
)
// 4.响应拦截器
_axios.interceptors.response.use(

  (res) => {
    if (res.data.success) {
      return res.data
    } else {
      // 错误的提示信息
      Message.error(res.data.message)
      // 让接口调用执行.catch,中止.then执行
      return Promise.reject(res.data.message)
    }
  },
  (error) => {
    if (error.response && error.response.status === 401) {
      // 清除token
      // 清除用户信息
      Store.commit('user/setToken', '')
      Store.commit('user/setUserInfo', '')
      Router.push('/login')
      // 提示错误信息
      Message.error(error.response.data.message)
      // 跳转到登录页面进行传值
      Router.push('/login?redirect=' + window.location.href.split('#')[1])
    }
    return Promise.reject(error)
  }
)
// 5.暴露出去
export default _axios

2.请求拦截

_axios.interceptors.request.use(
  (config) => {
    if (Store.state.user.token) {
      config.headers.Authorization = `Bearer ${Store.state.user.token}`
    }
    return config
  },
  (error) => {
    return Promise.reject(error)
  }
)

config对应的是在请求的时候要加的一些参数，比如在请求头上加token

error是在请求错误的时候返回的一个错误对象,又就是对请求错误的处理。

通过:

return Promise.reject(error)

例子:

在发送请求的时候网络被中断

3.响应拦截

响应拦截响应拦截已经给出了响应，对响应做处理。

_axios.interceptors.response.use(
  (res) => {
    if (res.data.success) {
      return res.data
    } else {
      // 错误的提示信息
      Message.error(res.data.message)
      // 让接口调用执行.catch,中止.then执行
      return Promise.reject(res.data.message)
    }
  },
  (error) => {
    if (error.response && error.response.status === 401) {
      // 清除token
      // 清除用户信息
      Store.commit('user/setToken', '')
      Store.commit('user/setUserInfo', '')
      Router.push('/login')
      // 提示错误信息
      Message.error(error.response.data.message)
      // 跳转到登录页面进行传值
      Router.push('/login?redirect=' + window.location.href.split('#')[1])
    }
    return Promise.reject(error)
  }
)

res代表什么？ res指的是响应回来的数据

error? error 指的是响应回来的错误

前端提供参数后端拿到参数查询数据库，将查询数据库的结果返回给前端。

响应回来的数据只有两种情况，比如说查询到了李华的信息所以 return res.data。

还有一种可能后台根据你提供的一些参数没有参数到结果,后台就是根据error的res.data.message来提供的提示。

第二个error回调是服务器响应回来的一个错误，比如说401代表没有权限，500代表服务器崩了。

302代表地址重定向了，根据错误码来重新进行处理。

4.总结

在我们发送请求的时候肯定要对接口api进行一些封装，无不例外有两种情况请求拦截和响应拦截

请求拦截的两个参数 res:请求的数据，error指的是请求的错误。请求中网络中断走error。

响应拦截的两个参数res:响应的数据,error指的是响应的错误。401权限不足,500服务器崩了。

5.不一样的两个错误

在响应拦截中有两个错误,一个是响应的时候服务器的错误，一个是前端给后端传递参数在数据库中进行查询，但是没有找到返回的错误。这两个错误是不一样的处理的逻辑也是不一样的。通过这两个例子可以很好地去理解拦截器。

后面还会更新其它的api封装 uni等。持续更新中。

请求拦截和响应拦截

1.全局代码

2.请求拦截

3.响应拦截

4.总结

5.不一样的两个错误

猜你喜欢