前端vue使用统一请求接口

一、在src下建一个utils包，放这两个文件

1.request.js

import axios from 'axios';

const baseURL = 'http://localhost:9090/api';

const instance = axios.create({
  baseURL,
  timeout: 10000,
});

instance.interceptors.request.use(
  (config) => {
    // 在发送请求之前可以做一些处理，比如在请求头中添加 token
    // config.headers.Authorization = `Bearer ${getToken()}`;

    // 如果存在 data 属性，则将其视为 JSON 数据
    if (config.data) {
      config.headers['Content-Type'] = 'application/json';
    }

    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

instance.interceptors.response.use(
  (response) => {
    // 对响应数据进行处理
    return response.data;
  },
  (error) => {
    // 对响应错误进行处理
    return Promise.reject(error);
  }
);

const request = {
  getHttp: ({ url, params, success, error }) => {
    instance.get(url, { params })
      .then((response) => {
        success(response);
      })
      .catch((err) => {
        error(err);
      });
  },

  postHttp: ({ url, data, params, success, error }) => {
    // 如果同时存在 data 和 params，则使用 data 发送 JSON 数据
    if (data && !params) {
      instance.post(url, data)
        .then((response) => {
          success(response);
        })
        .catch((err) => {
          error(err);
        });
    } else {
      instance.post(url, null, { params })
        .then((response) => {
          success(response);
        })
        .catch((err) => {
          error(err);
        });
    }
  },

  // 添加其他接口方法...
};
export default request;

2.requestPlugin.js

// requestPlugin.js

import request from './request';

const RequestPlugin = {
  install(Vue) {
    Vue.prototype.$request = request;
  }
};

export default RequestPlugin;

二，在main.js中引入插件

2.requestPlugin.js

//引入全局request插件
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

//引入全局request插件
import RequestPlugin from './utils/requestPlugin';
// 使用 request 插件
Vue.use(RequestPlugin);

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

三，如何发请求？后端如何接收？

1.1 params参数的请求

this.$request.postHttp({
        url: "/user/login",
        params: {
          username: this.username,
          password: this.password,
        },
        success: (data) => {
          console.log("Success:", data);
          // 执行成功时的操作
        },
        error: (error) => {
          console.error("Error:", error);
          // 执行失败时的操作
        },
      });
      //完整url为http://localhost:9090/api/user/login?username=xxxxx&password=xxxx

1.2 params参数的接收

	@PostMapping("/api/user/login")
    public R login(
            @RequestParam("username") String username,
            @RequestParam("password") String password) {     
        System.out.println("username:"+username);
        System.out.println("password:"+password);
        return R.ok();
    }

1.3 data参数的请求

this.$request.postHttp({
        url: "/user/login",
        data: {
          username: this.username,
          password: this.password,
        },
        success: (data) => {
          console.log("Success:", data);
          // 执行成功时的操作
        },
        error: (error) => {
          console.error("Error:", error);
          // 执行失败时的操作
        },
      });
      //完整url为http://localhost:9090/api/user/login

1.4 data参数的接收

	@PostMapping("/api/user/login")
    public R login(@RequestBody User user) {     
        System.out.println(user);
        return R.ok();
    }