请求拦截器 与 响应拦截器(React)

前提：

请求拦截器和响应拦截器主要应用场景：请求网络接口

• 请求拦截器：发送请求的时候，携带一些信息
• 响应拦截器：接收到数据的时候，进行数据过滤、对状态码判断，进行对应的操作

封装在untils文件夹里面的封装网络请求的的request.js文件

// 创建axios实例
export const baseURL = 'http://geek.itheima.net/v1_0/'
const instance = axios.create({
  baseURL,
  timeout: 5000,
})

一、请求拦截器

• 请求拦截器的作用是在请求发送前进行一些操作，例如在每个请求体里加上token，统一做了处理如果以后要改也非常容易。

代码实现（React）

/**
 * 保存token
 * @param {*} token
 * @returns
 */
export const setToken = (token) => localStorage.setItem(TOKEN_KEY, token)

/**
 * 获取token
 * @returns token
 */
export const getToken = () => localStorage.getItem(TOKEN_KEY)

// 配置拦截器
// 添加请求拦截器
instance.interceptors.request.use(
  function (config) {
    // 在发送请求之前做些什么，如果有token
    if (hasToken()) {
      config.headers.Authorization = `Bearer ${getToken()}`
    }
    return config
  },
  function (error) {
    // 对请求错误做些什么
    return Promise.reject(error)
  }
)

二、响应拦截器

• 响应拦截器的作用是在接收到响应后进行一些操作
  • 例如在服务器返回登录状态失效，需要重新登录的时候，跳转到登录页。
  • 对接收到的数据进行处理筛选，只留下需要的数据
• 响应拦截器也是一样如此，就是在请求结果返回后，先不直接导出，而是先对响应码等等进行处理，处理好后再导出给页面，如果将这个对响应码的处理过程抽出来，就成了所谓的响应拦截器。

代码实现（React）

/**
 * 移除token
 * @returns
 */
export const removeToken = () => localStorage.removeItem(TOKEN_KEY)

// 添加响应拦截器
instance.interceptors.response.use(
  function (response) {
    // 对响应数据做点什么
    return response.data
  },
  function (error) {
    // 对响应错误做点什么
    // 对token过期进行统一的处理
    if (!error.response) {
      // 如果error信息中没有response,网络超时导致
      message.error('网络繁忙，请稍后重试')
      return Promise.reject('网络繁忙，请稍后重试')
    }
    if (error.response.status === 401) {
      // 代表token过期了
      // 1. 删除token
      removeToken()
      // 2. 给提示消息
      message.warn('登录信息过期了', 1)
      // 3. 跳转到登录页
      // 怎么跳转到登录？？？
      // 难点：在非组件中，，，我们是无法使用 Redirect  也无法访问到history对象
      // window.location.href = '/login'
      history.push('/login')
    }
    return Promise.reject(error)
  }
)

三、页面中请求接口时