【九月打卡】第20天 使用axios 发送登陆 Mock 请求，请求函数的封装

课程名称：2022持续升级 Vue3 从入门到实战 掌握完整知识体系

课程章节：9-4 使用axios 发送登陆 Mock 请求，9-5 请求函数的封装，9-6 【讨论题】请求逻辑可以封装哪些内容，9-7 Toast 弹窗组件的开发

主讲老师：Dell

课程内容：

今天学习的内容包括：使用 axios 发送登陆 Mock 请求，请求函数的封装，请求逻辑可以封装哪些内容，Toast 弹窗组件的开发。

知识点：
发送请求，分别讲解了基本版、完整版和封装版

示例代码：
<script>
import { useRouter } from 'vue-router';
import axios from 'axios'
import { reactive } from 'vue'

axios.defaults.headers.post['Content-Type'] = 'application/json'

export default {
  name: 'Login',
  setup() {
    const data = reactive({
      username: '',
      password: ''
    })
    const router = useRouter();
    const handleLogin = () => {
      axios.post('api/user/login', {
        username: data.username,
        password: data.password
      }).then(() => {
        localStorage.isLogin = true
        router.push({ name: 'Home' })
      }).catch(() => {
        alert('登陆失败')
      })
    }
    const handleRegisterClick = () => {
      router.push({name: 'Register'})
    }
    return { handleLogin, handleRegisterClick, data }
  }
}
</script>

课程收获：

今天学了四个个小节，现在第九章还剩三个小节没学了。今天老师讲的内容是调用接口，前后端分离开发。分别讲解了基本版、完整版和封装版。之前做后端的时候直接用的 postman 去获取，前端调接口也差不太多。和昨天一样，也是比较熟悉、轻松的一天。不过 JavaScript 基础还有待加强。明天预备学完第九章，加油。

今日课程学习时间大约花费 19 分钟。