<script lang="ts" setup>
|
import { Session } from '@/utils/storage'
|
import {onMounted, ref} from 'vue'
|
import {useRouter} from 'vue-router'
|
import { ajaxGet, ajaxPost, cancelRequest } from '@/utils/axios'
|
|
const router = useRouter()
|
const msg = ref('before')
|
|
const handleAxiosTest = () => {
|
console.log('ss')
|
}
|
const handleAxiosTest2 = async() => {
|
// 1. 链式调用
|
ajaxGet('/test1').then(res => {
|
console.log(res, ' res')
|
}).catch((e) => {
|
console.log(e, 'error')
|
})
|
|
// 2. try await catch
|
try {
|
const res = await ajaxGet('/test1', {})
|
console.log(res, 'res2')
|
} catch (e) {
|
console.log(e, 'error2')
|
}
|
}
|
|
const handleAxiosTest3 = async() => {
|
const res = await ajaxPost('/user/info/login', 'user_no=001&user_password=123456')
|
console.log(res, 'show post res')
|
Session.set('token', res)
|
}
|
const handleAxiosTest4 = async() => {
|
const res = await ajaxPost('/user/info/getUserInfo','')
|
console.log(res, 'show post res')
|
}
|
|
const toTestPage = () => {
|
router.push('/test')
|
}
|
|
|
onMounted(() => {
|
// handleAxiosTest()
|
})
|
|
</script>
|
|
<template>
|
<div>{{ msg }}</div>
|
<Button plain color="red" type="primary">主要按钮</Button>
|
<Button />
|
<div v-if="msg === 'after'">hags</div>
|
<div id="test"></div>
|
<Button type="success" @click="handleAxiosTest">
|
点我发送请求
|
</Button>
|
<Button type="success" @click="handleAxiosTest2">
|
点我发送请求2
|
</Button>
|
<Button type="success" @click="handleAxiosTest3">
|
测试post请求
|
</Button>
|
<Button type="success" @click="handleAxiosTest4">
|
测试post请求44
|
</Button>
|
<Button @click="cancelRequest">取消请求</Button>
|
<Button @click="toTestPage">跳转页面</Button>
|
</template>
|
