[2024.9更新]新的RestfulAPI网络请求#

介绍#

​ 之前写过一份Axios网络请求中有发布过一份前后端相互配合的axios封装方法和Java中的RestBean，现更新一份更推荐的，更新如下：

1. 删除InternalGet
2. get可以携带params
3. post，get分离了message和data
4. RestBean分离了messgae和data

三和四针对之后的请求可以同时传输一个消息字符串和你需要传输的对象

//net/index.js
import axios from "axios";
import { ElMessage } from "element-plus";

const defaultError = () => ElMessage.error('发生错误，请联系管理员。')
const defaultFailure = (message) => ElMessage.warning(message)

function post(url, data, success, failure = defaultFailure, error = defaultError) {
    axios.post(url, data, {
        headers: {
            "Content-Type": "application/x-www-form-urlencoded"
        },
        withCredentials: true
    }).then(({data: responseData}) => {
        if (responseData.success)
            success(responseData.message,responseData.data)
        else
            failure(responseData.message)
    }).catch(error)
}

function get(url, data = null, success, failure = defaultFailure, error = defaultError) {
    const config = {
        withCredentials: true,
        params: data
    };

    axios.get(url, config)
        .then(({data: responseData}) => {
            if (responseData.success)
                success(responseData.message,responseData.data)
            else
                failure(responseData.message)
        })
        .catch(error)
}

export { get, post }

// RestBean.java

import lombok.Data;

/**
 * @author Flyinsky
 * @email w2084151024@gmail.com
 * @date 2024/9/1 11:30
 */
@Data
public class RestBean<T> {
    private int status;
    private boolean success;
    private String message;
    private T data;

    public RestBean(int status, boolean success, String message , T data) {
        this.status = status;
        this.success = success;
        this.message = message;
        this.data = data;
    }

    public static <T> RestBean<T> success(String message) {
        return new RestBean<>(200, true, message ,null);
    }

    public static <T> RestBean<T> success(String message , T data) {
        return new RestBean<>(200, true, message, data);
    }

    public static <T> RestBean<T> failure(int status, String message) {
        return new RestBean<>(status, false, message, null);
    }
}

调用示例：

<script setup>
import {post, get} from "@/net/index.js";
import {ElMessage} from "element-plus";

const testpost = () => {
  post('api/auth/test/post', {
    test: 'test'
  }, (message,data) => {
    ElMessage.success(message)
    ElMessage.success(data)
  }, (message,data) => {
    ElMessage.warning(message)
    ElMessage.warning(data)
  }, (message,data) => {
    ElMessage.error(message)
    ElMessage.error(data)
  })
}
const testget = () => {
  InternalGet('api/auth/test/get', (message, data) => {
    ElMessage.success(message)
    ElMessage.success(data)
  }, (message,data) => {
    ElMessage.warning(message)
    ElMessage.warning(data)
  }, (message,data) => {
    ElMessage.error(message)
    ElMessage.error(data)
  })
}
</script>