当前位置：首页 > news >正文

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

news 2025/7/19 6:41:01

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) {// 请求响应时的拦截处理（例如：登录鉴权等...）// ...// ...// 登录鉴权-401if(response && response.data && response.data.status && response.data.status == API.NOAUTH){// 鉴权逻辑处理// ...// ...}return response;
}, function (error) {// 请求响应失败时的处理return Promise.reject(error);
});export default http;