前端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();
}