前后端分离项目下 前端axios接口封装 的 优质解决方案

项目基于typescript语言，封装登录axios请求

文件目录如下

-src

--pages
---login

--services
---login.ts
---baseURL.ts

首先，创建一个单独的文件，命名为 baseUrl.ts，并在其中定义基础URL：

// baseUrl.ts

export const baseUrl = 'https://example.com';

然后，在需要使用基础URL的文件中导入并使用它，在login.ts中：

import axios, { AxiosInstance } from 'axios';
import { baseUrl } from './baseUrl'; // 导入基础URL

// 创建一个 Axios 实例并设置基础URL
const axiosInstance: AxiosInstance = axios.create({
  baseURL: baseUrl, // 使用导入的基础URL
});

// 登录接口
export interface LoginParams {
  username: string;
  password: string;
}

export interface LoginResponse {
  token?: string;
  status?: number; // 可选的状态码属性
  message?: string; // 可选的消息属性
}

export async function login(params: LoginParams): Promise<LoginResponse> {
  try {
    const response = await axiosInstance.post('/api/login', params); // 使用 Axios 实例发送请求
    console.log(response.data)
    
    if (response.data.status === 200) {
        return response.data;
    } else if (response.data.status === 404) {
        // 对状态码为 404 的情况进行特殊处理，不抛出错误，可以根据业务需求进行相应操作
        console.log('用户不存在或密码错误');
        return { status: 404, message: 'User not found or incorrect password' };
    } else {
        throw new Error(response.data.message);
    }
  } catch (error) {
    throw new Error('登录失败'); 
  }
}

在login.ts中可以直接引入使用：

import { LoginParams, LoginResponse, login } from '../services/login';

      const handleLoginSubmit = (username: string, password: string) => {

        const params: LoginParams = {
            username: username,
            password: password,
        };
        console.log('User: ' + username);
        console.log('Password:' + password);

        login(params)
            .then((response: LoginResponse) => {
                if(response.status === 200){
                    console.log('登录成功，Token:', response.token);
                    navigate('/manage');
                }
               else if(response.status === 400){
                console.log(response.message);
               }
            })
            .catch((error: Error) => {
                console.error('登录失败:', error.message);
            });
    };