2024年1月Java项目开发指南11：axios请求与接口统一管理

axios中文网：https://www.axios-http.cn/

安装

npm install axios

配置

在src下创建apis文件夹

创建axios.js文件

配置如下：

// src/apis/axios.js

import axios from 'axios';

// 创建axios实例
const service = axios.create({
    baseURL:"http://127.0.0.1:8080", // api的base_url，可以在.env文件中配置
    timeout: 5000 // 请求超时时间
});

// 请求拦截器
service.interceptors.request.use(
    config => {
        // 可以在这里添加一些请求前的逻辑，比如添加token到headers
        let token = localStorage.getItem("token")
        config.headers['Authorization'] = 'Bearer ' + token;
        return config;
    },
    error => {
        // 处理请求错误
        console.error(error); // for debug
        Promise.reject(error);
    }
);

// 响应拦截器
service.interceptors.response.use(
    response => {
        // 可以在这里对返回的数据进行一些处理
        return response.data;
    },
    error => {
        // 处理响应错误
        console.error('err' + error); // for debug
        return Promise.reject(error);
    }
);

export default service;

baseURL:"http://127.0.0.1:8080", // api的base_url，可以在.env文件中配置
    timeout: 5000 // 请求超时时间

上面这俩信息改成自己实际的，尤其是baseURL，其他的可以直接抄

创建api.js，配置如下

// api.js
import axiosInstance from './axios'; // 导入在axios.js中配置好的axios实例
export default {

}
// 统一的get请求方法
export function get(url, params = {}) {
    return axiosInstance.get(url, { params });
}

// 统一的post请求方法
export function post(url, data = {}) {
    return axiosInstance.post(url, data);
}

// 统一的put请求方法(通常用于更新资源)
export function put(url, data = {}) {
    return axiosInstance.put(url, data);
}

// 统一的delete请求方法
export function deleteRequest(url, params = {}) {
    // 注意：axios的delete方法第二个参数是config对象，如果要传递参数，通常使用params
    return axiosInstance.delete(url, { params });
}

这个文件可以直接抄。

下一篇笔记，我们尝试写出登录注册页面与功能