在本文中，我们将讨论如何在 react 中使用 axios 创建安全高效的 api 客户端。我们将使用 apiclient 类介绍 axios 设置、拦截器、错误处理配置和 crud 方法。让我们分解一下这个脚本的工作原理以及它提供的功能。
1。 axios 基本配置
import axios from "axios";import securelocalstorage from "react-secure-storage";axios.defaults.baseurl = "";axios.defaults.headers.post["content-type"] = "application/json";
这个初始 axios 设置定义了 baseurl 并为所有 post 请求设置了 content-type。通过配置基本 url，axios 会自动将此基本 url 附加到每个请求，从而更轻松地在 api 调用中使用端点。
2。使用拦截器进行响应和错误处理
拦截器是强大的工具，使我们能够全局处理响应和错误。
处理响应
axios.interceptors.response.use( function (response) { return response.data ? response.data : response; }, // ...## handling errors);
此响应拦截器检查响应中是否有数据。如果存在，则仅返回数据。这样，我们只在组件中获取我们需要的相关数据，而无需重复访问response.data。
处理错误
function (error) { if (error?.response?.status === 401 && error?.response?.data?.data === 'token is not valid'){ securelocalstorage.clear() window.location.href = '/' } else { let message; switch (error?.response?.status) { case 500: message = error?.response; break; case 401: message = error?.response; break; case 404: case 400: case 409: message = error?.response?.data; break; default: message = error.message || error; } return promise.reject(message); }}
在本节中，如果响应状态为 401 并且令牌无效，应用程序会从安全本地存储中清除令牌并将用户重定向到登录页面。这可确保用户在身份验证会话过期时自动注销。对于其他状态代码，它会捕获错误并根据错误类型返回适当的消息。
3。 setauthorization函数
const setauthorization = (token) => { axios.defaults.headers.common["token"] = token;};
此函数允许应用程序动态地为每个请求添加身份验证令牌。登录后调用setauthorization(token)，token会自动添加到请求头中。
4。为 crud 方法创建 apiclient 类
apiclient 类提供了 http 请求的标准方法，包括 get、create、update、put 和 delete。
获取方法
此方法很灵活，可以处理对象或字符串格式的参数。
get = (url, params) => { let response; let paramkeys = []; if (params && typeof (params) === 'object') { object.keys(params).map(key => { if (key === 'pagination') { paramkeys.push("pageindex=" + string(params[key]?.pageindex || 1)); paramkeys.push("pagesize=" + string(params[key]?.pagesize || 10)); } else { paramkeys.push(key + '=' + params[key]); } }); const querystring = paramkeys.length ? paramkeys.join('&') : ""; response = axios.get(`${url}?${querystring}`, params); } else if (typeof (params) === 'string') { response = axios.get(`${url}/${params}`); } else { response = axios.get(url, params); } return response;};
此方法会自动格式化查询字符串，从而更轻松地创建具有复杂参数（如分页、过滤器或排序）的 get 请求。
创建、更新、放置和删除方法
这些方法使用axios内置的post、patch、put和delete函数与api交互。
create = (url, data) => { return axios.post(url, data);};update = (url, data) => { return axios.patch(url, data);};put = (url, data) => { return axios.put(url, data);};delete = (url, config) => { return axios.delete(url, { ...config });};
该类抽象了api调用，使得组件中的代码更加干净、结构化，减少了冗余。
api 客户端使用示例
import { API_URL, API_VERSION } from "#/Common/constants/env";import { APIClient } from "#/helpers/api_helper";export const POST_LOGIN = API_URL + API_VERSION + "/auth/login";const api = new APIClient();export const Login = (data: any) => api.create(POST_LOGIN, data);
对于完整的脚本，您可以查看以下要点
axios 拦截器
以上就是axios拦截器+React JS的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1497053.html
微信扫一扫 
支付宝扫一扫 
![Go语言接口与切片：如何识别和操作[]interface{}](https://cdn.chuangxiangniao.com/www/2025/12/176369856569294-1.jpg?imageMogr2/crop/480x300/gravity/center)
