第一种方式

内容区:

<view class="content">
	<button type="default" @click="testInternet">测试网络</button>
	<view>网络状态:{{isOnline}}</view>
</view>

js代码:

//测试网络状态
async testInternet() {
	uni.showLoading({
		title: '请求中'
	})
	var [err, res] = await uni.request({
		method: 'GET',
		url: 'http://127.0.0.1',
		timeout: 2000
	})
	uni.hideLoading()
	if (res) {
		this.isOnline = true
	} else {
		this.isOnline = true
	}
	console.log('可以上网?')
	console.log(this.isOnline)
}

第二种方式

uni.request同步化,具体代码参考

<template>
	<view class="content">
		<image class="logo" src="/static/logo.png"></image>
		<view class="text-area">
			<text class="title">{{title}}</text>
		</view>
		<view class="content">
			<button type="default" @click="testInternet">测试网络</button>
			<view>网络状态:{{isOnline}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				isOnline: false
			}
		},
		onLoad() {
			// this.doTest()
			this.doTest2()
		},
		methods: {
			async doTest(){
				var test1 = await this.getTest1()
				if(test1){
					var test2=await this.getTest2()
				}
				console.log('22222222222222')
			},
			doTest2(){
				this.getTest1()
					.then((res)=>this.getTest2())
					.then((res)=>this.getTest3())
					.catch((err)=>{
						console.log(err)
					})
			},
			getTest1(){
				return new Promise((resolve,reject)=>{
					uni.request({
						url:'http:172.18.5.3',
						method:'GET',
						success: (res) => {
							console.log(res.statusCode)
							console.log('test1')
							resolve(true)
						},
						fail:(err)=>{
							console.log(err)
							console.log('test1')
							reject(false)
						}
					})
				})
			},
			getTest2(){
				return new Promise((resolve,reject)=>{
					uni.request({
						url:'http:172.18.5.3',
						method:'GET',
						success: (res) => {
							console.log(res.statusCode)
							console.log('test2')
							resolve('suc')
						},
						fail:(err)=>{
							console.log(err)
							console.log('test2')
							reject('err')
						}
					})
				})
				
			},
			getTest3(){
				return new Promise((resolve,reject)=>{
					uni.request({
						url:'http:172.18.5.3',
						method:'GET',
						success: (res) => {
							console.log(res.statusCode)
							console.log('test3')
							resolve('suc')
						},
						fail:(err)=>{
							console.log(err)
							console.log('test3')
							reject('err')
						}
					})
				})
				
			},
			//测试网络状态
			async testInternet() {
				uni.showLoading({
					title: '请求中'
				})
				var [err, res] = await uni.request({
					method: 'GET',
					url: 'http://172.18.5.3',
					timeout: 2000
				})
				uni.hideLoading()
				if (res) {
					this.isOnline = true
				} else {
					this.isOnline = false
				}
				console.log('可以上网?')
				console.log(this.isOnline)
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>
Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐