【前端知识】Axios——请求拦截器模板

Axios——请求拦截器模板

• 构建状态码常量

  /*
   * @Author: outmanchen
   * @Date: 2023-09-06 15:40:56
   * @LastEditors: outmanchen
   * @LastEditTime: 2023-09-06 16:04:37
   * @FilePath: \axios\status.js
   * @Description: 状态码常量
   */
  
  export default {
  	SUCCESS: 200,
      NOAUTH: 401
      // ...
  }
  

• 封装拦截器

/*
 * @Author: outmanchen
 * @Date: 2023-09-06 15:37:17
 * @LastEditors: outmanchen
 * @LastEditTime: 2023-09-06 16:05:13
 * @FilePath: \axios\index.js
 * @Description: 网络请求封装
 */
import http from 'axios'; // 引入axios网络请求库
import API from './status'; // 引入状态码常量

/**
 * 请求拦截器
 */
http.interceptors.request.use(function (config) {
  if(!config.params){
    config.params = {};
  }
  // 请求发送前的拦截处理（例如：在headers中添加token、在params中添加时间戳...）
  // ...
  // ...
  return config;
}, function (error) {
  // 请求发送失败时的处理
  // ...
  // ...
  return Promise.reject(error);
});


/**
 * 响应拦截器
 */
http.interceptors.response.use(function (response) {
  // 请求响应时的拦截处理（例如：登录鉴权等...）
  // ...
  // ...
  // 登录鉴权-401
  if(response && response.data && response.data.status && response.data.status == API.NOAUTH){
      // 鉴权逻辑处理
      // ...
      // ...
  }
  return response;
}, function (error) {
  // 请求响应失败时的处理
  return Promise.reject(error);
});

export default http;