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

Axios——请求拦截器模板

Axios是一个基于Promise的HTTP客户端，用于发送HTTP请求。它可以在浏览器和Node.js环境中使用，并且提供了许多强大的功能，例如拦截请求和响应、转换请求和响应数据、取消请求等。

Axios具有简单易用的API，可以轻松地发送GET、POST、PUT、DELETE等各种类型的请求。它还支持异步操作和并发请求。

使用Axios发送HTTP请求非常方便，你只需要提供请求的URL和可选的配置参数，然后Axios会返回一个Promise对象，你可以通过该对象处理请求的结果。

Axios还支持自定义拦截器，你可以在发送请求之前或者响应返回之后做一些处理，例如设置请求头、验证响应数据、错误处理等。

总的来说，Axios是一个强大而且简单易用的HTTP客户端库，广泛应用于前端开发和Node.js开发中。

• 构建状态码常量

  /*
   * @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;