uniapp request请求同步化

Myth丶恋晨 2022-09-12 13:46 822阅读 0赞

## 第一种方式 ##

内容区：

<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>