老师，try..catch怎么理解，在if...else里面判断了，为什么外面要加上try...catch

<template>

<div class="wrapper">

<img class="wrapper__img" src="http://www.dell-lee.com/imgs/vue3/user.png">

<div class="wrapper-form">

<div>

<input

class="wrapper__name"

type="text"

placeholder="请输入用户名"

v-model="data.username"

>

</div>

<div>

<input

class="wrapper__pas"

type="password"

placeholder="请输入密码"

v-model="data.password"

>

</div>

<button class="loginBtn" @click="handelClick">登陆</button>

<div class="reg-fpas">

<span class="registerBtn" @click="handelRegister">立即注册</span>

<span class="line">|</span>

<span class="fpasBtn">忘记密码</span>

</div>

</div>

</div>

</template>

<script>

//从vue路由导入useRouter方法

import { useRouter } from 'vue-router'

//导入axios

//import axios from 'axios'

import {post} from '../../axios/request'

import {reactive} from 'vue'

//设置Content-Type

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

export default {

name:'LoginPage',

components:{},

setup(){

const router = useRouter();

const data =reactive({

username:'',

password:''

})

//点击立即注册，跳转到注册页面

const handelRegister=()=>{

router.push({name: 'Register'})

}

//const handelClick=()=>{

//发送登陆请求，将用户名和密码发送给后台

// axios.post(

//     'https://www.fastmock.site/mock/ae8e9031947a302fed5f92425995aa19/jd/api/user/login',

//     {

//         username:data.username,

//         password:data.password

//     }

// ).then(()=>{

//     localStorage.setItem('isLogin',true);

//     //登录态为true,执行下一步跳转

//     router.push({name: 'Home'})

// }).catch(()=>{

//     alert('登陆失败')

// })

//}

const handelClick = async()=>{

try{

//result是结果集合

const result = await post('/api/user/login',

{

username:data.username,

password:data.password

}

)

//console.log(result)

//?. 是ES2020（ES11）新特性，意思是尝试访问对象的属性之前检查对象是否存在，

//防止在对象不存在时访问属性导致代码报错

if(result?.errno===0){

localStorage.setItem('isLogin',true);

//登录态为true,执行下一步跳转

router.push({name: 'Home'})

}else{

alert('登陆失败')

}

}catch(e){//如果接口请求失败，就可以在这里捕获

alert('请求失败')

}

}

return{ handelRegister,handelClick,data}

}

}

</script>

<style lang="scss" scoped>

.wrapper{

position:absolute;

top:50%;

left:0;

right:0;

transform: translateY(-50%);

&__img{

width:.56rem;

height:.56rem;

display: block;

margin:0 auto .4rem;

}

input{

width:2.95rem;

height:.48rem;

background: #F9F9F9;

border: 1px solid rgba(0,0,0,0.10);

border-radius: .06rem;

text-indent: .16rem;

font-size:.16rem;

display:block;

margin:0 auto .16rem;

outline: none;

}

.loginBtn{

width:2.95rem;

height:.48rem;

background: #0091FF;

box-shadow: 0 .04rem .08rem 0 rgba(0,145,255,0.32);

border-radius: .04rem;

color:#fff;

border:none;

outline: none;

font-size:.16rem;

display: block;

margin:.32rem auto .16rem;

}

.reg-fpas{

display:flex;

justify-content:center;

font-size: .14rem;

color: #777;

.line{

margin:0 .12rem;

}

}

}

</style>