【vue3.0】9.0 某东到家（九）——axios发送登录mock请求、请求函数的封装

后端接口可以写到自己搭建的fast mock网站上。
fast mock官方网站

image.png

在向后台请求数据之前需要在终端安装axios插件：

> npm install axios --save

修改src\views\login\Login.vue:

<script>
// 路由跳转方法
import { useRouter } from 'vue-router'
import axios from 'axios'
export default {
  name: 'Login',
  setup () {
    // 获取路由实例
    const router = useRouter()
    // 登录按钮
    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 }
  }
}
</script>

在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>
    <div class="wrapper__input">
      <input
        type="password"
        class="wrapper__input__content"
        placeholder="请输入密码"
        v-model="formInfo.password"
      />
    </div>
    <div class="wrapper__login-button" @click="handleLogin">登陆</div>
    <div class="wrapper__login__item">
      <div class="wrapper__login__item__link" @click="handleRegisterClick">
        立即注册
      </div>
      <p class="wrapper__login__item__cut">|</p>
      <div class="wrapper__login__item__password">忘记密码</div>
    </div>
  </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>

image.png

再次调整：

<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 () => {
      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' })
    }
    return { formInfo, handleLogin, handleRegisterClick }
  }
}
</script>