refactor(api): 重构 HTTP模块并优化错误处理

- 将 http.ts 重命名为 http.js
- 添加全局错误处理逻辑
- 更新 API 调用和错误处理方式
- 优化登录页面的验证码发送逻辑
- 调整消息组件的显示位置
This commit is contained in:
xingyy 2025-01-16 16:18:38 +08:00
parent 0107ff6217
commit 4ab0a5ca81
4 changed files with 32 additions and 19 deletions

View File

@ -1,4 +1,4 @@
import { getHttp } from '@/api/http.ts'
import { getHttp } from '~/api/http.js'
export async function senCode(data) {
const http = getHttp()

View File

@ -1,19 +1,17 @@
import type { $Fetch } from 'ofetch'
import { useRuntimeConfig } from '#app'
import { ofetch } from 'ofetch'
import {message} from '@/components/x-message/useMessage.js'
let httpStatusErrorHandler
type HttpStatusErrorHandler = (message: string, statusCode: number) => void
let httpStatusErrorHandler: HttpStatusErrorHandler
let http: $Fetch
let http
export function setupHttp() {
if (http)
return http
const config = useRuntimeConfig()
const baseURL = config.public.NUXT_PUBLIC_API_BASE as string
const baseURL = config.public.NUXT_PUBLIC_API_BASE
http = ofetch.create({
baseURL,
@ -26,7 +24,13 @@ export function setupHttp() {
...(token && { Authorization: token }),
}
},
async onResponse({ response }) {
if (response._data.status===1){
message.warning(response._data.msg)
}
},
async onResponseError({ response }) {
console.log('error错误')
const { message } = response._data
if (Array.isArray(message)) {
message.forEach((item) => {
@ -43,7 +47,7 @@ export function setupHttp() {
})
}
export function injectHttpStatusErrorHandler(handler: HttpStatusErrorHandler) {
export function injectHttpStatusErrorHandler(handler) {
httpStatusErrorHandler = handler
}

View File

@ -28,7 +28,7 @@ defineExpose({ showMessage })
v-if="visible"
:text="messageText"
:type="messageType"
class="fixed top-20px left-1/2 -translate-x-1/2 z-9999"
class="fixed top-50px left-1/2 -translate-x-1/2 z-9999"
/>
</transition>
</template>

View File

@ -11,10 +11,14 @@ definePageMeta({
title: '登录',
i18n: 'login.title',
})
const loadingRef=ref({
loading1:false
})
const isExist=ref(false)// true
const isReal=ref(false) //isReal
function goToPage() {
router.push('/countryRegion');
}
const phoneNum = ref('')
const code = ref('')
const pane = ref(0)
@ -63,13 +67,19 @@ watch(locale, () => {
})
const vanSwipeRef=ref(null)
const getCode =async () => {
/* const res=await senCode({
loadingRef.value.loading1=true
const res=await senCode({
telNum:phoneNum.value,
zone:selectedZone.value
})*/
pane.value = 1
vanSwipeRef.value?.swipeTo(pane.value)
showKeyboard.value=true
})
loadingRef.value.loading1=false
if (res.status===0){
pane.value = 1
vanSwipeRef.value?.swipeTo(pane.value)
showKeyboard.value=true
}
}
const goBack = () => {
code.value = ''
@ -88,7 +98,7 @@ const goLogin = () => {
</div>
<van-swipe ref="vanSwipeRef" :show-indicators="false" :touchable="false" :lazy-render="true" :loop="false">
<van-swipe-item >
<div v-if="pane===0">
<div v-show="pane===0">
<div class="">
<div class="w-full flex justify-between" @click="goToPage">
<div class="text-[16px] text-[#000]">
@ -108,7 +118,7 @@ const goLogin = () => {
<div />
</div>
<div class="mt-[55px]">
<van-button v-if="phoneNum" type="primary" block style="height: 48px" @click="getCode">{{ $t('login.getCode')
<van-button :loading="loadingRef.loading1" v-if="phoneNum" :loading-text="$t('login.getCode')" type="primary" block style="height: 48px" @click="getCode">{{ $t('login.getCode')
}}</van-button>
<van-button v-else type="primary" color="#D3D3D3" block style="height: 48px">{{ $t('login.getCode')
}}</van-button>
@ -116,13 +126,12 @@ const goLogin = () => {
</div>
</van-swipe-item>
<van-swipe-item>
<div v-if="pane===1">
<div v-show="pane===1">
<div class="flex mb-[16px]">
<div class="text-[16px] text-[#BDBDBD] mr-[10px]">{{ $t('login.hasSendTo') }}</div>
<div class="text-[16px] text-[#000]">+{{ selectedZone }} {{ phoneNum }}</div>
</div>
<van-password-input :value="code" :gutter="10" :mask="false" focused @focus="showKeyboard = true" />
<div class="text-#2B53AC text-14px">
{{ $t('login.reSend') }}
</div>