utils目录下创建request.js
import axios from 'axios'
// 调用 axios.create() 函数,创建一个 axios 的实例对象,用 request 来接收
const Service = axios.create({
// 指定请求的根路径
baseURL: 'https://www.xxx.com/api'
})
// 请求拦截
Service.interceptors.request.use(
config => {
return config
},
error => {
return Promise.reject(error)
}
)
// 响应拦截
Service.interceptors.response.use(
response => {
return response
},
error => {
return Promise.reject(error)
}
)
export default (url, data = {}, method = 'GET') => {
return Service({
url,
data,
method
})
}
login.vue组件中使用
<template>
<input type="text" v-model="username" placeholder="请输入用户名/手机号">
<input type="text" v-model="password" placeholder="请输入密码">
<span @click="toLogin">登录</span>
</template>
<script>
// 引入Service
import Service from '../../utils/request.js'
import { reactive, toRefs } from '@vue/reactivity'
import { useRouter } from 'vue-router'
export default {
setup() {
const router = useRouter()
const data = reactive({
username: 'admin',
password: '12345',
})
// 点击登录
const toLogin = async () => {
const { data: res } = await Service('/user/login', { username: data.username.trim(), password: data.password.trim() }, 'post')
if (res.code === 200) {
router.push({
path: '/home'
})
}
}
return {
...toRefs(data),
toLogin
}
}
}
</script>