当前位置: 首页 > article >正文

React封装axios请求方法

1.安装Axios

首先安装axios

npm install axios

2.创建request.js

在util目录下创建request.js文件,用于封装axios请求

// util/request.js
import axios from 'axios';

// 创建 Axios 实例
const instance = axios.create({
  baseURL: process.env.REACT_APP_API_BASE_URL, // 从环境变量中读取
  timeout: 10000, // 请求超时时间
  headers: {
    'Content-Type': 'application/json',
  },
});

// 请求拦截器
instance.interceptors.request.use(
  (config) => {
    // 在发送请求之前做些什么,例如添加 token
    const token = localStorage.getItem('token');
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  (error) => {
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);

// 响应拦截器
instance.interceptors.response.use(
  (response) => {
    // 对响应数据做些什么
    return response.data;
  },
  (error) => {
    // 对响应错误做些什么
    if (error.response) {
      switch (error.response.status) {
        case 401:
          // 处理未授权的情况
          break;
        case 404:
          // 处理未找到资源的情况
          break;
        default:
          // 处理其他错误
          break;
      }
    }
    return Promise.reject(error);
  }
);

// 封装 GET 请求
export const get = (url, params) => {
  return instance.get(url, { params });
};

// 封装 POST 请求
export const post = (url, data) => {
  return instance.post(url, data);
};

// 封装 PUT 请求
export const put = (url, data) => {
  return instance.put(url, data);
};

// 封装 DELETE 请求
export const del = (url) => {
  return instance.delete(url);
};

3.在组件中使用封装的请求

可以在 React 组件中使用封装好的请求方法。

// src/components/ExampleComponent.js
import React, { useEffect, useState } from 'react';
import { get, post } from '../api';

const ExampleComponent = () => {
  const [data, setData] = useState(null);

  useEffect(() => {
    // 使用封装的 GET 请求
    get('/posts')
      .then((response) => {
        setData(response);
      })
      .catch((error) => {
        console.error('Error fetching data:', error);
      });

    // 使用封装的 POST 请求
    post('/posts', {
      title: 'foo',
      body: 'bar',
      userId: 1,
    })
      .then((response) => {
        console.log('Post created:', response);
      })
      .catch((error) => {
        console.error('Error creating post:', error);
      });
  }, []);

  return (
    <div>
      <h1>Example Component</h1>
      {data && (
        <ul>
          {data.map((item) => (
            <li key={item.id}>{item.title}</li>
          ))}
        </ul>
      )}
    </div>
  );
};

export default ExampleComponent;

4.axios和umi-request封装请求的区别

umi-request:umi-request 是 Umi 框架内置的请求库,基于 fetch 封装,专为 Umi 生态设计。适用于使用 Umi 框架的项目。umi-request 的拦截器设计更简洁,直接通过 interceptors 方法实现。
axios:axios 是一个独立的、广泛使用的 HTTP 请求库,基于 XMLHttpRequest 封装。适用于任何 React 项目(无论是否使用 Umi)。axios 的拦截器设计更灵活,支持请求和响应拦截。


http://www.kler.cn/a/590126.html

相关文章:

  • 新能源电站系统建设提速!麒麟信安操作系统驱动光伏风电双领域安全升级
  • 【css酷炫效果】纯CSS实现立体纸张折叠动效
  • 机器学习_重要知识点整理
  • 双3060、Ubuntu22.04、cuda12.8安装deepseek 32b-Q8
  • 从零开始开发纯血鸿蒙应用之无框截图
  • 轨道交通3U机箱CPCI电机控制板(DSP),主要运行控制算法以对牵引电机进行精准的运动控制
  • 深度学习:分类和回归的区别
  • DOM4J解析XML, 修改xml的值
  • 独立部署DeepSeek 大语言模型(如 DeepSeek Coder、DeepSeek LLM)可以采用什么框架?
  • 蓝桥杯小球碰撞
  • 蓝桥杯 刷题统计
  • Appium使用文档
  • ubuntu24.04-qt5-mysql8.0
  • AI-医学影像分割方法与流程
  • 华为eNSP(Enterprise Network Simulation Platform)实战指南
  • WEB安全--SQL注入--预防SQL注入的一些方法
  • Kafka 中的偏移量是什么?它解决了哪些问题?
  • HTML 基础夯实:标签、属性与基本结构的学习进度(二)
  • 数据可视化在特征分布对比中的应用
  • DataWhale 大语言模型 - 大模型技术基础