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)
            }
        })
}