axios调用接口

封装接口

//axios的二次封装
import axiosInstance from "../request";

/**
 * 登录接口
 */
export const RequestLogin = (username,password) => {
    return axiosInstance(
        {
            method:'post',
            url:'/api/login',
            data:{
                username,
                password,
            }
        }
    )
}

async await 的方式

const onLogin = async () => {
    const data = await RequestLogin(account.value.username, account.value.password)
    const { resultCode, resultInfo } = data
    if (resultCode == 1) {
        //...
        // 跳转
        router.push({path:'/home'})
    } else {
        ElMessage.error(resultInfo)
    }
}

async await try catch 的方式

const onLogin = async () => {
    try{
        const data = await RequestLogin(account.value.username, account.value.password)
        const { resultCode, resultInfo } = data
        if (resultCode == 1) {
            // 跳转
            router.push({path:'/home'})
        } else {
            ElMessage.error(resultInfo)
        }
    }catch(err){
        ElMessage.error(err)
    }
}

.then .catch 的方式

const onLogin = () => {
    RequestLogin(account.value.username, account.value.password).then(res => {
        const { resultCode, resultInfo } = res
        if (resultCode == 1) {
            router.push({ path: '/home' })
        } else {
            ElMessage.error(resultInfo)
        }
    })
}

未封装接口

const onLogin = () => {
    axiosInstance
        .post('/api/login', {
            username: account.value.username,
            password: account.value.password,
        })
        .then(res => {
            const { resultCode, resultInfo } = res
            if (resultCode == 1) {
                router.push({ path: '/home' })
            } else {
                ElMessage.error(resultInfo)
            }
        })
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值