vite基础学习笔记：5.API接口（登录接口）

1. 准备api接口（post请求方式）

登录接口信息如下：
①URL地址：http://syt.atguigu.cn/api/user/login
②请求方式：post
③body参数：phone和code
④返回数据：token

---

在src中新建api文件夹（统一管理请求），api中创建相应模块文件夹，新建文件index.ts

import request from '../utils/request';
export const reqLogin = (data:{phone: string, code: string}) => request.post('/user/login',data);

2. 获取接口返回值

第一步：确认接口可返回数据（body参数先固定）

<template>
    <div>
        login-登录页面
    </div>
</template>

<script setup lang="ts">
import {reactive} from 'vue';
import { reqLogin } from '../../api/index';
//设置loginParam为body返回参数
const loginParam=reactive({
    phone:"1780358562",
    code:"222222",
})
reqLogin(loginParam);
</script>

F12-网络显示如下：说明可调用接口返回数据
第二步：通过前端界面输入body参数：输入参数后，点击按钮，调用异步登录请求

<template>
    <div>
        login-登录页面
        <p>手机号<input type="text" placeholder="请你输入11位数字手机号" v-model="loginParam.phone"></p>
        <p>验证码<input type="text" placeholder="请你输入6位数字验证码" v-model="loginParam.code"></p>
         <!--点击按钮，调用异步登录请求-->
        <button @click="Login">登录</button>
    </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue';
import { reqLogin } from '../../api/index';
const loginParam = reactive({
    phone: "",
    code: "",
});
const Login = async()=> {
    await reqLogin(loginParam);
}
</script>

前端界面如下：
点击登录按钮，调用接口，F12-网络显示如下：
（需完善）第三步：请求异常处理（若输入账号错误，提醒）
注：请求发生异常，怎么处理？ 是try/catch 捕获异常，把await 放到 try 中进行执行，如有异常，就使用catch 进行处理，后期再扩充这一部分

<script setup lang="ts">
import { reactive } from 'vue';
import { reqLogin } from '../../api/index';
const loginParam = reactive({
    phone: "",
    code: "",
});
const Login = async () => {
    try {
        await reqLogin(loginParam);
    }catch(error){
    }
}
</script>