TMUI4x(鸿蒙Next)

Appearance

广告位招租意向联系我
TMUI4x2025-09-03
2272
10m

xRequest - Library ​

介绍 ​

这是一个核心的极简请求库，拦截，事件监听一应俱全。而且事件监听可重复叠加。 可跨页面中断所有请求，同时包含了dev模式可以统计所有的请求并打印。

还能对接口进行缓存以减少重复请求。

演示 ​

在线预览
在线模拟尺寸:

使用 ​

你可以参考demo页面/pages/index/xrequest，来进行参考使用。

导入 ​

ts

//导入参数类型
import { xRequestOptions, xRequestOptionsCallBack, xRequestResult, xRequestHistoryType } from "@/uni_modules/tmx-ui/interface.uts"
//导入库
import { xRequest, xRequestCall } from "@/uni_modules/tmx-ui/index.uts"

设置全局的域名(非必须) ​

如果你有多个域名，也可以在请求的时候配置，所以这一步它不是必须的。

ts

xRequest.setHostUrl(url)

创建实例 ​

ts

let rq = new xRequest(opts?:xRequestOptions)

可以在具体使用时修改配置或者添加配置 前面的域名，也可以在下面的具体请求时再填写。

ts

rq.request(opts?:xRequestOptions)

类型参考 ​

ts

export type xReuestMethond = "GET" | "POST" | "PUT" | "PATCH" | "DELETE" | "HEAD" | "OPTIONS"

/**
 * xReuest请求配置表
 */
export type xRequestOptions = {
	/**
	 * 是否新增访问前缀域名。如果提供了，在请求时会覆盖函数设置的setHostUrl如果不提供就使用全局设置的域名。
	 */
	hostUrl?:string,
	/** 定义服务器成功的状态码，如果不为此值会让请求进入失败状态。 */
	successStatusCode ?: number,
	/** string|null */
	url ?: string,
	/** 如果请求时提供了缓存时间将对接口进行缓存，一定时间内请求直接返回上次结果，不会真正请求 */
	cacheTime?:number,
	/** 是否启用缓存 */
	useCache?:boolean,
	/** UTSJSONObject|string|null */
	data ?: any,
	/** UTSJSONObject|string|null */
	header ?: UTSJSONObject,
	method ?: xRequestMethond,
	timeout ?: number,
	firstIpv4 ?: boolean,
	/** 请求前是否显示loading遮罩 */
	showLoadToast ?: boolean,
	/** 请求成功后是否提示，否则不提示 */
	showSuccessToast ?: boolean,
	/** 出错时，是否显示提示,否则不提示 */
	showErrorToast ?: boolean,
	dataType ?: string | null,
	responseType ?: string | null
}
/**
 * 在监事事件中返回的参数类型
 */
export type xRequestOptionsCallBack = {
	/**
	 * 是否新增访问前缀域名。如果提供了，在请求时会覆盖函数设置的setHostUrl如果不提供就使用全局设置的域名。
	 */
	hostUrl:string,
	/** 定义服务器成功的状态码，如果不为此值会让请求进入失败状态。 */
	successStatusCode : number,
	/** 是否启用缓存 */
	useCache:boolean,
	/** 如果请求时提供了缓存时间将对接口进行缓存，一定时间内请求直接返回上次结果，不会真正请求 */
	cacheTime:number,
	/** string|null */
	url : string,
	/** UTSJSONObject|string|null */
	data : any,
	/** UTSJSONObject|string|null */
	header : UTSJSONObject,
	method : xRequestMethond,
	timeout : number,
	firstIpv4 : boolean,
	/** 请求前是否显示loading遮罩 */
	showLoadToast : boolean,
	/** 请求成功后是否提示，否则不提示 */
	showSuccessToast : boolean,
	/** 出错时，是否显示提示,否则不提示 */
	showErrorToast : boolean,
	dataType ?: string | null,
	responseType ?: string | null
}
/**
 * 请求成功后听结果
 */
export type xRequestResult= {
	data: any|null,
	statusCode: number,
	header: any,
	cookies: string[],
}

export type xRequestHistoryType = {
	id:string,
	loading:boolean,
	loaded:boolean,
	/** 状态标志 */
	status:string,
	/** 请求总时间ms为单位 */
	time:number,
	/** 请求的接口api名称 */
	api:string,
	/** 请求成功后的数据集 */
	result:any
};

静态方法 ​

以下静态方法允许在任意地方导入并使用设置，全局生效（任何页面和uts中请求都会起作用）

函数参数说明
setAuthisPass:boolean如果设置false，所有新发起的请求会被全部阻止，包括跨页面。
setHeaderheader : UTSJSONObject如果设置请求的头数据，所有新发起的请求都会被应用，如果实例中也配置了header会与此header合并。
setHostUrlurl : string设置后，全局生效，局部请求如果配置了域名会覆盖全局配置
setDevdev : boolean设置后，整个应用的请求会全部统计并收集起来
getHistory-返回整个应用期间请求的所有记录日志
setShowToastshowLoadToast:boolean = true,showSuccessToast:boolean = true,showErrorToast:boolean = true可以设置全局响应的显示行为，局部会覆盖此全局设置

实例方法(new xRequest()) ​

属性名类型说明
setOptionsopts ?: xReuestOptions设置本次请求的配置
addEventListenerevent : xRequestEventType = "success", fun : (arg : any) => Promise<any>添加请求的事件监听
abort-中断本次请求
requestopts ?: xReuestOptions发起请求，它是一个Promise，返回参数是Promise<xReuestResult>

addEventListener说明 ​

第一个参数：event如下： ​

请求前请求成功后中断请求超时错误授权被中止成功完成
"before""after""abort""timeout""error""auth""success""complete"
建议你返回：Promise<boolean>；目前uts没有联合类型。因此类型转换比较麻烦。函数体参数是xReuestOptionsCallBack函数体参数是xReuestResult,需要返回Promise<xReuestResult>会修改最终的请求结果数据需要返回Promise<any>需要返回Promise<any>需要返回Promise<any>需要返回Promise<any>需要返回Promise<any>需要返回Promise<any>

第二个参数： ​

ts

// 下面的Promise<any>是上面说明中必须要返回的类型。请按照上方event要求返回相关类型。如果没有特别说明可以是Promise<any>

(arg : any) => Promise<any>
arg代表上面事件函数体的参数，可以访问。

示例 ​

vue

<template>
	<!-- #ifdef APP -->
	<scroll-view style="flex:1">
	<!-- #endif -->

		<x-sheet>
			<x-text font-size="18" class=" text-weight-b mb-8">xRequest - Library</x-text>
			<x-text color="#999999">
				这是一个核心的极简请求库，拦截，事件监听一应俱全。而且事件监听可重复叠加。可跨页面中断所有请求，同时包含了dev模式可
				以统计所有的请求并打印。
			</x-text>
		</x-sheet>

		<x-sheet>
			<x-text font-size="18" class=" text-weight-b mb-8">设置全局请求域名</x-text>
			<x-sheet color="info" dark-color="#333" :margin="['0']">
				<x-text>当前:{{hostUrl}}</x-text>
			</x-sheet>
			<view class="flex flex-row flex-row-center-between mt-12">
				<x-button @click="setGloabalHostUrl" width="45%">设置域名</x-button>
				<x-button @click="clearGloabalHostUrl" width="45%">删除域名</x-button>
			</view>
		</x-sheet>

		<x-sheet>
			<x-text font-size="18" class=" text-weight-b mb-8">添加监听事件,可重复添加合并执行</x-text>

			<x-sheet color="info" dark-color="#333" :margin="['0']">
				<x-text>监听事件执行状态:{{status}}</x-text>
				<x-text>结果:{{resulte}}</x-text>
			</x-sheet>

			<view class="flex flex-row flex-row-center-between mt-12">
				<x-button @click="request" :block="true">请求接口</x-button>
			</view>
		</x-sheet>

		<x-sheet>
			<x-text font-size="18" class=" text-weight-b mb-8">打开dev记录所有请求</x-text>
			<x-text color="#999999">
				打开为dev后，请重新发起请求，将会全局记录所有页面的请求记录和日志
			</x-text>
			<view class="flex flex-row flex-row-center-between my-16">
				<x-button @click="openDev" :block="true">打开开发模式</x-button>
			</view>

			<x-sheet color="info" dark-color="#333" :margin="['0']">
				<x-text>{{historyRq}}</x-text>
			</x-sheet>

		</x-sheet>

		<x-sheet>
			<x-text font-size="18" class=" text-weight-b mb-8">xRequest真实请求Api示例</x-text>
			<x-text color="#999999">
				基此封装的api路由请见demo/pages/libs下面.
			</x-text>
			<x-button :block="true" @click="testRq">请求作者服务器</x-button>
		</x-sheet>

		<view style="height:300px"></view>
		<x-devtool></x-devtool>
		<!-- enterFrame -->
	<!-- #ifdef APP -->
	</scroll-view>
	<!-- #endif -->
</template>

<script>
	import { xRequestOptions, xRequestOptionsCallBack, xRequestResult, xRequestHistoryType } from "@/uni_modules/tmx-ui/interface.uts"
	import { xRequest, xRequestCall } from "@/uni_modules/tmx-ui/index.uts"
	import { api } from "../libs/api";
	import { LISTPAGEART_TYPE } from "../libs/interface";

	export default {
		data() {
			return {
				status: "",
				resulte: null as xRequestResult | null
			};
		},
		computed: {
			hostUrl() : string {
				return xRequestCall.hostUrl;
			},
			historyRq() : xRequestHistoryType[] {
				return xRequestCall.history;
			}
		},
		onLoad() {

		},
		methods: {
			async testRq() : Promise<any | null> {
				let result = await api.getArtListArt<LISTPAGEART_TYPE>({
					page: 1,
					count: 16
				} as UTSJSONObject)
				if (result == null) return Promise.resolve(null);
				console.log(result)
				return Promise.resolve(null)
			},
			setGloabalHostUrl() {
				// 可以在任意地方页面,uts中执行，全局生效
				xRequest.setHostUrl("https://mockapi.eolink.com/SZ2MLNR496b4c667257afac7776f24aea84c907abb261c1")
			},
			clearGloabalHostUrl() {
				// 可以在任意地方页面,uts中执行，全局生效
				xRequest.setHostUrl("")
			},
			openDev() {
				// 可以在任意地方页面,uts中执行，全局生效
				xRequest.setDev(true)
			},
			request() {


				let _this = this;

				let rq = new xRequest()

				rq.addEventListener('before', (opts : any) : Promise<any> => {
					let optsObj = opts as xRequestOptionsCallBack;

					// before允许你请求前再次修复参数opts,然后返回到请求中.
					optsObj.header = { biubiu: "888" } as UTSJSONObject
					// 在h5端会报sdk bug，但不影响使用，我目前不知道原因。建议不要修改这个data字段。
					optsObj.data = { sdf: "00" } as UTSJSONObject

					_this.status = 'before'
					// 下面改false可以中断请求。
					return Promise.resolve(optsObj)
				})
					.addEventListener('before', (opts : any) : Promise<any> => {
						let optsObj = opts as xRequestOptionsCallBack;
						_this.status = 'before-2'
						// before也允许返回boolean用于中断请求.
						// 任何事件，都可以重复添加。然后会把所有相同的before事件一并执行
						// 但如果其中有一个返回了false，会中断后面的执行，并结束请求，不会发起真正的请求。
						return new Promise((res, rej) => {
							setTimeout(function () {
								res(true)
							}, 800);
						})
					})
					.addEventListener('abort', (result : any) : Promise<any> => {
						let jg = result as xRequestResult;
						_this.status = 'abort'
						return Promise.resolve(true)
					})
					.addEventListener('timeout', (result : any) : Promise<any> => {
						let jg = result as xRequestResult;
						_this.status = 'timeout'
						// 请求超时时触发。
						return Promise.resolve(true)
					})
					.addEventListener('error', (result : any) : Promise<any> => {
						let jg = result as xRequestResult;
						_this.status = 'error'
						// 请求错误时触发
						return Promise.resolve(true)
					})
					.addEventListener('after', (result : any) : Promise<any> => {
						let jg = result as xRequestResult;
						_this.status = 'after'

						// 可以改变请求结果的数据
						return new Promise((res) => {
							setTimeout(function () {
								jg.data = { code: 2, msg: "成功", data: "我是after修改后的结果" } as UTSJSONObject
								res(jg)
							}, 800);
						})
					})
					.addEventListener('complete', (result : any) : Promise<any> => {
						let jg = result as xRequestResult;
						_this.status = 'complete'

						// 不管成功与否都会触发这里
						return Promise.resolve(true)
					})



				rq.request({ url: "/web/atcilDetail/", data: { id: 2 } } as xRequestOptions)
					.then(result => {
						_this.resulte = result as xRequestResult;
						// 如果你在这里请求发现jg返回的数据通过服务器比如，需要重新登录
						// 你可以 
						// xRequest.setAuth(x:boolean)
						// 请求成功后
						console.log(result, "请求成功的数据", _this.resulte)
					})
					.catch((er) => {
						// 请求失败后
						console.log(er, "请求错误")
					})
			}
		}
	}
</script>
最近更新