request.uvue

<template>
	<view style="flex: 1;">
		<view class="uni-padding-wrap uni-common-mt">
			<view class="uni-common-mt" style="border-width: 2rpx;border-radius: 4rpx;">
				<textarea :value="res" class="uni-textarea"></textarea>
			</view>
			<view>
				<text>地址 : {{ host + url}}</text>
				<text>请求方式 : {{method}}</text>
			</view>
			<view class="uni-btn-v uni-common-mt">
				<button type="primary" @click="sendRequest">发起请求</button>
			</view>
		</view>
		<scroll-view style="flex: 1;" show-scrollbar="true">
			<view style="padding: 20rpx;">
				<text>设置请求方式</text>
				<view class="uni-common-pb"></view>
				<view style="flex-direction: row;flex-wrap: wrap;">
					<button style="padding: 5rpx; margin-right: 10rpx;" type="primary" size="mini"
						@click="changeMethod('GET')">GET</button>
					<button style="padding: 5rpx; margin-right: 10rpx; " type="primary" size="mini"
						@click="changeMethod('POST')">POST</button>
					<button style="padding: 5rpx; margin-right: 10rpx; " type="primary" size="mini"
						@click="changeMethod('PUT')">PUT</button>
					<button style="padding: 5rpx; margin-right: 10rpx;" type="primary" size="mini"
						@click="changeMethod('DELETE')">DELETE</button>
					<button style="padding: 5rpx; margin-right: 10rpx; " type="primary" size="mini"
						@click="changeMethod('PATCH')">PATCH</button>
					<button style="padding: 5rpx;margin-right: 10rpx;" type="primary" size="mini"
						@click="changeMethod('OPTIONS')">OPTIONS</button>
					<button style="padding: 5rpx;" type="primary" size="mini"
						@click="changeMethod('HEAD')">HEAD</button>
				</view>
			</view>
			<view style="padding: 20rpx;">
				<text>请求返回错误码的接口（默认为GET）</text>
				<view class="uni-common-pb"></view>
				<view style="flex-direction: row;flex-wrap: wrap;">
					<button style="padding: 5rpx;" type="primary" size="mini" v-for="(item, index) in errorCodeUrls"
						:key="index" @click="changeUrl(item)">{{item}}</button>
				</view>
			</view>
			<view style="padding: 20rpx;">
				<text>请求不同header的接口（默认为GET）</text>
				<view class="uni-common-pb"></view>
				<view style="flex-direction: row;flex-wrap: wrap;">
					<button style="padding: 5rpx;" type="primary" size="mini" v-for="(item, index) in headerUrls"
						:key="index" @click="changeUrl(item)">{{item}}</button>
				</view>
			</view>
			<view style="padding: 20rpx;">
				<text>请求不同content-type的接口（默认为GET）</text>
				<view class="uni-common-pb"></view>
				<view style="flex-direction: row;flex-wrap: wrap;">
					<button style="padding: 5rpx;" type="primary" size="mini" v-for="(item, index) in contentTypeUrls"
						:key="index" @click="changeUrl(item)">{{item}}</button>
				</view>
			</view>

			<view style="padding: 20rpx;">
				<text>POST请求(有body)</text>
				<view class="uni-common-pb"></view>
				<view style="flex-direction: row;flex-wrap: wrap;">
					<button style="padding: 5rpx;" type="primary" size="mini" v-for="(item, index) in postUrls"
						:key="index" @click="changeUrlFromPost(item)">{{item}}</button>
				</view>
			</view>
		</scroll-view>
	</view>
</template>
<script>
	const duration = 2000
	const methodMap = {
		"GET": "/api/http/method/get",
		"POST": "/api/http/method/post",
		"PUT": "/api/http/method/put",
		"DELETE": "/api/http/method/delete",
		"PATCH": "/api/http/method/patch",
		"OPTIONS": "/api/http/method/options",
		"HEAD": "/api/http/method/head"
	}


	export default {
		data() {
			return {
				title: 'request',
				res: '',
				task: null as RequestTask | null,
				pageVisible: false,
				host: "http://request.dcloud.net.cn",
				url: "/api/http/method/get",
				method: "GET",
				data: null as any | null,
				header: null as UTSJSONObject | null,
				errorCodeUrls: [
					"/api/http/statusCode/200",
					"/api/http/statusCode/204",
					"/api/http/statusCode/301",
					"/api/http/statusCode/302",
					"/api/http/statusCode/307",
					"/api/http/statusCode/400",
					"/api/http/statusCode/401",
					"/api/http/statusCode/403",
					"/api/http/statusCode/404",
					"/api/http/statusCode/405",
					"/api/http/statusCode/500",
					"/api/http/statusCode/502",
					"/api/http/statusCode/503",
					"/api/http/statusCode/504",
				],
				headerUrls: [
					"/api/http/header/ua",
					"/api/http/header/referer",
					"/api/http/header/requestCookie",
					"/api/http/header/setCookie",
					"/api/http/header/deleteCookie"
				],
				contentTypeUrls: [
					"/api/http/contentType/text/plain",
					"/api/http/contentType/text/html",
					"/api/http/contentType/text/xml",
					"/api/http/contentType/image/gif",
					"/api/http/contentType/image/jpeg",
					"/api/http/contentType/image/png",
					"/api/http/contentType/application/json",
					"/api/http/contentType/application/octetStream",
				],
				postUrls: [
					"/api/http/contentType/json",
					"/api/http/contentType/xWwwFormUrlencoded",
				],
			}
		},
		onLoad() {
			this.pageVisible = true;
		},
		onUnload() {
			this.pageVisible = false;
			uni.hideLoading();
			this.task?.abort();
		},
		methods: {
			changeMethod(e : string) {
				this.method = e;
				this.url = methodMap[e] as string;
				this.data = null;
				this.header = null;
			},
			changeUrl(e : string) {
				this.method = "GET";
				this.url = e;
				this.data = null;
				this.header = null;
			},
			changeUrlFromPost(e : string) {
				this.method = "POST";
				this.url = e;
				switch (e) {
					case "/api/http/contentType/json":
						this.header = {
							"Content-Type": "application/json"
						};
						this.data = {
							"hello": "world"
						};
						break;
					case "/api/http/contentType/xWwwFormUrlencoded":
						this.header = {
							"Content-Type": "application/x-www-form-urlencoded"
						};
						this.data = "hello=world";
						break;
				}
			},
			sendRequest() {
				uni.showLoading({
					title: "请求中..."
				})
				this.task = uni.request({
					url: this.host + this.url,
					// dataType: "json",
					// responseType: "json",
					method: this.method,
					data: this.data,
					header: this.header,
					timeout: 6000,
					sslVerify: false,
					withCredentials: false,
					firstIpv4: false,
					success(res) {
						if (this.pageVisible) {
							console.log('request success', JSON.stringify(res.data))
							uni.showToast({
								title: '请求成功',
								icon: 'success',
								mask: true,
								duration: duration
							});
							this.res = '请求结果 : ' + JSON.stringify(res);
						}
					},
					fail(err) {
						if (this.pageVisible) {
							console.log('request fail', err);
							uni.showModal({
								content: err.errMsg,
								showCancel: false
							});
						}
					},
					complete() {
						uni.hideLoading()
					},
				});
			}
		}
	}
</script>