前端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.jsimport 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 = falsenew 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();    }