Axios-React通用简易版封装

ggbba@

已于 2023-07-05 11:45:15 修改

阅读量313

点赞数 4

文章标签： javascript ajax react

于 2023-07-05 11:22:18 首次发布

本文链接：https://blog.csdn.net/OYBY123/article/details/131551971

版权

文章展示了如何在React应用中使用axios库创建一个包含请求和响应拦截器的HTTP客户端，用于设置基础URL、请求头，处理超时和错误，以及与AntDesign的message组件结合显示信息提示。此外，还给出了一个登录接口的示例。

摘要由CSDN通过智能技术生成

src下创建apis文件==>新建request.tsx,开启封装步骤如下

/* eslint-disable no-unreachable */
import axios, { AxiosRequestConfig } from 'axios';
import { message } from 'antd';//信息提示
//import { useNavigate } from "react-router-dom";

// 创建一个 Axios 实例
const http = axios.create({
  baseURL: "http://121.89.205.189:3000/admin", // 设置基础请求 URL.开发模式
  headers: {
    'Content-Type': 'application/json', // 设置默认请求头
  },
  timeout: 8000, // 设置请求超时时间
  withCredentials: false// 跨域时候允许携带凭证
});

// 请求拦截器
http.interceptors.request.use(
  (config) => {
    // 在发送请求之前可以对请求进行一些处理，如设置请求头等
    // 可以添加验证逻辑、设置请求头等等
    const token = localStorage.getItem('token');
    config.headers!.token = token;//非空断言!
    return config;
},
  (error) => {
    // 处理请求错误
    message.error("配置错误");
    return Promise.reject(error);
  }
);

// 响应拦截器
http.interceptors.response.use(
  (response: any) => {
    // 对响应数据进行处理，解析响应数据、统一处理错误等
    // 这里可以进行统一的错误处理、数据格式化等操作
    if (response.data?.data?.token) {
      localStorage.setItem("token", response.data.data.token);
    }
    //token失效删除token - 自动跳回登录页
    if (response.data.code === "10019") {
      message.warning("登入过期,请重新登入");
      localStorage.removeItem("token");
      window.location.href = "/login";
    }
    //弹窗message返回的信息
    const messageType = response.data.code === "200" ? "success" : "error";
    message[messageType](response?.data?.message);
  
    return response.data;
  },
  (error) => {
    // 处理响应错误
    if (error.response) {
      // 存在响应错误，根据状态码进行处理
      if (error.response.status === 408) {
        // 请求超时
        // 进行相应的处理，如显示错误提示、重新发送请求等
        message.error("请求超时");
      } else {
        // 其他错误状态码
        // 进行相应的处理，如显示错误提示、跳转页面等
        message.error("请求错误");
      }
    } else if (error.request) {
      // 请求未收到响应，可能是网络错误或服务器未响应等
      // 进行相应的处理，如显示网络错误提示、重试操作等
      message.error("网络错误");
    } else {
      // 其他错误
      // 进行相应的处理，如显示错误提示、跳转页面等
      message.error("请求错误");
    }
    return Promise.reject(error);
  }
);
export default function request (config:AxiosRequestConfig){
  const {method='get',url='',data={}} = config;

  switch(method.toUpperCase()){
    case 'GET':
      return http.get(url,{params:data})
    case 'POST':
      return http.post(url,data)
    default:
      return http(config)//其他参数 PUT,DEL
  }
}

调用接口试用:apis文件下新增==>modules文件==>admin.tsx接口文件

//登入接口定义类型,根据后台返回什么就定义什么
interface AdminParams {
	adminname: string,
	password: string
}
//登入接口
export const adminLogin = (params:AdminParams) => {
  return request({
    method:'post',
    url:'/admin/login',
    data:params
  })
}