在本文中，我们将讨论如何在 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 拦截器
