const handleLogin = () => { axios .post('/api/user/login', { username: 'username', password: 'password' }) .then(res => { alert('成功！') .catch(() => { alert('失败！') const handleRegisterClick = () => { router.push({ name: 'Register' }) return { handleLogin, handleRegisterClick }

在fast mock注册一个账号，新建项目，新建接口，就可以测试通过这个mock请求。

    // 登录按钮
    const handleLogin = () => {
      axios
        .post('https://www.fastmock.site/mock/d5dd8d041954390fa7d82aed171865ca/api/user/login', { username: 'username', password: 'password' })
        .then(res => {
          alert('成功！')
        .catch(() => {
          alert('失败！')
和输入框数据绑定：
<template>
  <div class="wrapper">
    <img class="wrapper__img" src="/i18n/9_16/img/user.png" />
    <div class="wrapper__input">
      <input
        class="wrapper__input__content"
        placeholder="请输入手机号码"
        v-model="formInfo.username"
    <div class="wrapper__input">
      <input
        type="password"
        class="wrapper__input__content"
        placeholder="请输入密码"
        v-model="formInfo.password"
    <div class="wrapper__login-button" @click="handleLogin">登陆</div>
    <div class="wrapper__login__item">
      <div class="wrapper__login__item__link" @click="handleRegisterClick">
      <p class="wrapper__login__item__cut">|</p>
      <div class="wrapper__login__item__password">忘记密码</div>
</template>
<script>
import { reactive } from 'vue'
// 路由跳转方法
import { useRouter } from 'vue-router'
import axios from 'axios'
export default {
  name: 'Login',
  setup () {
    const formInfo = reactive({
      username: '',
      password: ''
    // 获取路由实例
    const router = useRouter()
    // 登录按钮
    const handleLogin = () => {
      axios
        .post(
          'https://www.fastmock.site/mock/d5dd8d041954390fa7d82aed171865ca/mock/api/user/login',
            username: formInfo.username,
            password: formInfo.password
        .then(res => {
          alert('成功！')
        .catch(() => {
          alert('失败！')
    const handleRegisterClick = () => {
      router.push({ name: 'Register' })
    return { formInfo, handleLogin, handleRegisterClick }
</script>
请求函数的封装
axios请求还可以进一步封装
<script>
import { reactive } from 'vue'
// 路由跳转方法
import { useRouter } from 'vue-router'
import axios from 'axios'
axios.defaults.headers.post['Content-Type'] = 'application/json'
export default {
  name: 'Login',
  setup () {
    const formInfo = reactive({
      username: '',
      password: ''
    // 获取路由实例
    const router = useRouter()
    // 登录按钮
    const handleLogin = async () => {
      const result = await axios.post(
        'https://www.fastmock.site/mock/d5dd8d041954390fa7d82aed171865ca/mock/api/user/login',
          username: formInfo.username,
          password: formInfo.password
      console.log(result)
      // .then(res => {
      //   alert('成功！')
      // })
      // .catch(() => {
      //   alert('失败！')
      // })
    const handleRegisterClick = () => {
      router.push({ name: 'Register' })
    return { formInfo, handleLogin, handleRegisterClick }
</script>
import axios from 'axios'
axios.defaults.headers.post['Content-Type'] = 'application/json'
export default {
  name: 'Login',
  setup () {
    const formInfo = reactive({
      username: '',
      password: ''
    // 获取路由实例
    const router = useRouter()
    // 登录按钮
    const handleLogin = async () => {
      try {
        const result = await axios.post(
          'https://www.fastmock.site/mock/07065e4dfb5e94e8751933c9f973d95c/mock/api/user/login',
            username: formInfo.username,
            password: formInfo.password
        // console.log(result)
        if (result?.data?.code === 200) {
          localStorage.isLogin = true
          router.push({ name: 'Home' })
        } else {
          alert('登陆失败！')
      } catch (e) {
        alert('请求失败！')
    const handleRegisterClick = () => {
      router.push({ name: 'Register' })
    return { formInfo, handleLogin, handleRegisterClick }
</script>
现在对axios做一些封装。创建src\utils\request.js：
import axios from 'axios'
export const post = (url, data = {}) => {
  return new Promise((resolve, reject) => {
    axios.post(url, data, {
      baseURL: 'https://www.fastmock.site/mock/07065e4dfb5e94e8751933c9f973d95c/mock',
      headers: {
        'Content-Tpye': 'application/json'
    }).then((res) => {
      resolve(res)
    }, err => {
      reject(err)
然后修改src\views\login\Login.vue:
<script>
import { reactive } from 'vue'
// 路由跳转方法
import { useRouter } from 'vue-router'
import { post } from '@/utils/request'
export default {
  name: 'Login',
  setup () {
    const formInfo = reactive({
      username: '',
      password: ''
    // 获取路由实例
    const router = useRouter()
    // 登录按钮
    const handleLogin = async () => {
      try {
        const result = await post(
          '/api/user/login',
            username: formInfo.username,
            password: formInfo.password
        // console.log(result)
        if (result?.data?.code === 200) {
          localStorage.isLogin = true
          router.push({ name: 'Home' })
        } else {
          alert('登陆失败！')
      } catch (e) {
        alert('请求失败！')
    const handleRegisterClick = () => {
      router.push({ name: 'Register' })
    return { formInfo, handleLogin, handleRegisterClick }
</script>
还可以更专注于内容本身：

修改src\utils\request.js:
import axios from 'axios'
export const post = (url, data = {}) => {
  return new Promise((resolve, reject) => {
    axios.post(url, data, {
      baseURL: 'https://www.fastmock.site/mock/07065e4dfb5e94e8751933c9f973d95c/mock',
      headers: {
        'Content-Tpye': 'application/json'
    }).then((res) => {
      resolve(res.data)
    }, err => {
      reject(err)
然后修改src\views\login\Login.vue:
<script>
import { reactive } from 'vue'
// 路由跳转方法
import { useRouter } from 'vue-router'
import { post } from '@/utils/request'
export default {
  name: 'Login',
  setup () {
    const formInfo = reactive({
      username: '',
      password: ''
    // 获取路由实例
    const router = useRouter()
    // 登录按钮
    const handleLogin = async () => {
      try {
        const data = await post(
          '/api/user/login',
            username: formInfo.username,
            password: formInfo.password
        // console.log(result)
        if (data?.code === 200) {
          localStorage.isLogin = true
          router.push({ name: 'Home' })
        } else {
          alert('登陆失败！')
      } catch (e) {
        alert('请求失败！')
    const handleRegisterClick = () => {
      router.push({ name: 'Register' })