• 【前端知识】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
          // ...
      }
      
      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13
      • 14
    • 封装拦截器

    /*
     * @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;
    
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
  • 相关阅读:
    计算机毕设(附源码)JAVA-SSM基于JAVA的校园电车租赁系统
    NewStarCTF2023 Reverse Week3---Let‘s Go Wp
    基于springboot高校社团管理系统
    2311vim极语言加高亮
    搭建SpringBoot工程步骤
    nginx rewrite参数 以及 $1、$2参数解析(附有生产配置实例)
    coredump-X: 构造函数未作成员指针的初始化复合多线程导致
    SpringSecurity Oauth2实战 - 04 自定义AuthProvider实现认证登录
    HTML中script 标签中的那些属性
    『期末复习』微处理器发展历程与微型计算机结构
  • 原文地址:https://blog.csdn.net/weixin_42919342/article/details/132717812