axios拦截器+React JS

在本文中，我们将讨论如何在 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的详细内容，更多请关注抖狐科技其它相关文章！