ssts-hospital-web-master项目实战记录二十一：项目迁移-基础模块实现（ajax-util）
记录时间：2024-02-26
一、ajax-util模块实现
framework/utils/ajax-util.ts
import { serveFile, clientWebApi, hyAjax } from '@/common'
import { AjaxObject } from '../types'
import { LogAjaxSuccessInfo, LogAjaxErrorInfo } from './log-serve'
//重新封装Ajax请求WebApi
//url—如：'/api/Access/GetById'
//async—true-异步,false-同步（一般不需要获取同步结果的设定true）
//dataMap—json对象，建议首字母小写。如：JSON.stringify({ id : 1 })
//fnSuccess:调用成功回调函数，如需跟踪调试结果请设置弹框（如果不传或null，只传送到服务端记录调用日日志）
//fnError:调用错误回调函数，如需跟踪调试结果请设置弹框（如果不传或null，只传送到服务端记录调用日日志）
const ajaxWebApi = function (
url: string,
async: boolean,
dataMap: any,
fnSuccess?: any,
fnError?: any
): any {
const thisAjax: AjaxObject = {
url: url,
data: dataMap
}
const result = hyAjax({
url: url,
method: 'POST',
contentType: 'application/json',
async: async,
data: dataMap
})
.then((data) => {
// console.log('ajaxWebApi success', data)
if (fnSuccess != undefined) {
LogAjaxSuccessInfo(thisAjax, data)
fnSuccess(data)
} else {
LogAjaxSuccessInfo(thisAjax, data)
}
return data
})
.catch((error) => {
// console.log('ajaxWebApi error', error)
const XMLHttpRequest: {
readyState: number
responseText: string
status: number
statusText: string
} = {
readyState: 0,
responseText: '',
status: 0,
statusText: ''
}
const textStatus = 'error'
const errorThrown = error
if (fnError != undefined) {
LogAjaxErrorInfo(thisAjax, XMLHttpRequest, textStatus, errorThrown)
fnError(XMLHttpRequest, textStatus, errorThrown)
} else {
LogAjaxErrorInfo(thisAjax, XMLHttpRequest, textStatus, errorThrown)
}
})
return result
}
//重新封装Ajax请求File（.json|.xml等）
const ajaxFile = function (url: string) {
const result = serveFile(url)
return result
}
//重新封装Ajax请求Http接口
const ajaxHttpSystem = function (methodname: string, params: object) {
const data = {
params: params
}
const result = clientWebApi(`/api/System/${methodname}`, data)
return result
}
export { ajaxWebApi, ajaxFile, ajaxHttpSystem }
二、调用示例
test-framework-ajax-util.vue
<script setup lang="ts">
import { onMounted } from 'vue'
import { ajaxWebApi, ajaxHttpSystem } from '@/framework/utils/ajax-util.ts'
import { GetClientIP } from '@/framework/utils/log-serve'
const TestAjaxUtil = function () {
console.log('TestAjaxUtil begin')
const terminalIp = GetClientIP()
// ajaxWebApi
const ajaxWebApi_Result = ajaxWebApi(
'/api/Terminal/GetTerminalByTerminalIp',
true,
{
terminalIp: terminalIp
},
function fnSuccess(data: any) {
console.log('ajaxWebApi fnSuccess', data)
},
function fnError(error: any) {
console.log('ajaxWebApi fnError', error)
}
)
console.log('ajaxWebApi_Result', ajaxWebApi_Result)
// ajaxHttpSystem
const ajaxHttpSystemResult = ajaxHttpSystem('WriteLog', [
{ type: 'string', value: 'D:/LogInfo/log.txt' },
{ type: 'string', value: 'test' },
{ type: 'bool', value: 1 },
{ type: 'string', value: 'utf-8' }
]).then((result: any) => {
console.log('ajaxHttpSystem', result)
})
console.log('ajaxHttpSystemResult', ajaxHttpSystemResult)
console.log('TestAjaxUtil end')
}
onMounted(() => {
console.log('test-framework.vue', 'mounted')
TestAjaxUtil()
})
</script>
<template>
<div>
<title>测试框架</title>
</div>
</template>
<style scoped></style>
三、运行测试
