后端服务
@RestController
@RequestMapping("/user")
public class UserController {
@PostMapping("/login1")
public void login1(String username, String password) {
System.out.println(username + " " + password);
}
@PostMapping("/login2")
public void login2(@RequestParam String username, @RequestParam String password) {
System.out.println(username + " " + password);
}
@PostMapping("/login3")
public void login3(User user) {
System.out.println(user);
}
@PostMapping("/login4")
public void login4(@RequestBody User user) {
System.out.println(user);
}
}
前端 Axios工具类
import axios from 'axios'
import {
ElMessage} from 'element-plus'
import store from '@/store'
import router from '@/router'
const http = axios.create({
baseURL: '/',
timeout: 10000,
withCredentials: true,
})
http.interceptors.request.use(
config => {
const {
authorization } = store.state.app
if (authorization) {
config.headers.Authorization = `Bearer ${
authorization.token}`
}
return config
},
error => {
return Promise.reject(error)
}
)
http.interceptors.response.use(
response => {
return response.data
},
async error => {
if (error.response && error.response.status === 401) {
const {
authorization } = store.state.app
if (!authorization || !authorization.refresh_token) {
if (router.currentRoute.value.name === 'login') {
return Promise.reject(error)
}
const redirect = encodeURIComponent(window.location.href)
router.push(`/user/login?redirect=${
redirect}`)
store.dispatch('app/clearToken')
setTimeout(() => {
ElMessage.closeAll()
try {
ElMessage.error(error.response.data.msg)
} catch (err) {
ElMessage.error(error.message)
}
})
return Promise.reject(error)
}
try {
const res = await axios({
method: 'PUT',
url: '/api/authorizations',
timeout: 10000,
headers: {
Authorization: `Bearer ${
authorization.refresh_token}`,
},
})
store.commit('app/setToken', {
token: res.data.data.token,
refresh_token: authorization.refresh_token,
})
return http(error.config)
} catch (err) {
const redirect = encodeURIComponent(window.location.href)
router.push(`/login?redirect=${
redirect}`)
store.dispatch('app/clearToken')
return Promise.reject(error)
}
}
ElMessage.closeAll()
try {
ElMessage.error(error.response.data.msg)
} catch (err) {
ElMessage.error(error.message)
}
return Promise.reject(error)
}
)
export function get (url, params) {
return new Promise((resolve, reject) => {
axios.get(url, {
params: params
}).then(res => {
resolve(res.data)
}).catch(error => {
reject(error.data)
})
})
}
export function post (url, params) {
return new Promise((resolve, reject) => {
axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'
axios.post(url, qs.stringify(params))
.then(res => {
resolve(res.data)
})
.catch(err => {
reject(err.data)
})
})
}
export function postJson (url, params) {
return new Promise((resolve, reject) => {
axios.post(url, params)
.then(res => {
resolve(res.data)
})
.catch(err => {
reject(err.data)
})
})
}
export function fileUpload (url, params) {
return new Promise((resolve, reject) => {
axios({
url: url,
method: 'post',
data: params,
headers: {
'Content-Type': 'multipart/form-data' }
}).then(res => {
resolve(res)
})
.catch(error => {
reject(error)
})
})
}
前端页面
<template>
<el-button @click="fun1">单击</el-button>
<el-button @click="fun2">单击</el-button>
<el-button @click="fun3">单击</el-button>
<el-button @click="fun4">单击</el-button>
<br>
<el-button @click="fun5">单击</el-button>
<el-button @click="fun6">单击</el-button>
<el-button @click="fun7">单击</el-button>
<el-button @click="fun8">单击</el-button>
</template>
<script>
import {
post, postJson} from '@/utils/axios'
export default {
name: 'Demo',
setup () {
const fun1 = () => {
post('/api/user/login1', {
username: 'hc',
password: '1234'
}).then(res => {
console.info(res)
})
}
const fun2 = () => {
post('/api/user/login2', {
username: 'hc',
password: '1234'
}).then(res => {
console.info(res)
})
}
const fun3 = () => {
post('/api/user/login3', {
username: 'hc',
password: '1234'
}).then(res => {
console.info(res)
})
}
const fun4 = () => {
post('/api/user/login4', {
username: 'hc',
password: '1234'
}).then(res => {
console.info(res)
})
}
const fun5 = () => {
postJson('/api/user/login1', {
username: 'hc',
password: '1234'
}).then(res => {
console.info(res)
})
}
const fun6 = () => {
postJson('/api/user/login2', {
username: 'hc',
password: '1234'
}).then(res => {
console.info(res)
})
}
const fun7 = () => {
postJson('/api/user/login3', {
username: 'hc',
password: '1234'
}).then(res => {
console.info(res)
})
}
const fun8 = () => {
postJson('/api/user/login4', {
username: 'hc',
password: '1234'
}).then(res => {
console.info(res)
})
}
return {
fun1, fun2, fun3, fun4, fun5, fun6, fun7, fun8 }
}
}
</script>
测试