177 lines
3.8 KiB
Vue
177 lines
3.8 KiB
Vue
<template>
|
||
<view>
|
||
<page-head :title="title"></page-head>
|
||
<view class="uni-padding-wrap uni-common-mt">
|
||
<view class="uni-hello-text">
|
||
请点击按钮向服务器发起请求
|
||
</view>
|
||
<view class="uni-textarea uni-common-mt">
|
||
<textarea :value="res"></textarea>
|
||
</view>
|
||
<view class="uni-btn-v uni-common-mt">
|
||
<button type="primary" @click="sendRequest" :loading="loading">发起请求（Callback）</button>
|
||
<button type="primary" @click="sendRequest('promise')" :loading="loading">发起请求（Promise）</button>
|
||
<button type="primary" @click="sendRequest('await')" :loading="loading">发起请求（Async/Await）</button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<script>
|
||
const requestUrl = 'https://unidemo.dcloud.net.cn/ajax/echo/text?name=uni-app'
|
||
const duration = 2000
|
||
export default {
|
||
data() {
|
||
return {
|
||
title: 'request',
|
||
loading: false,
|
||
res: ''
|
||
}
|
||
},
|
||
methods: {
|
||
sendRequest(mode) {
|
||
this.loading = true;
|
||
switch (mode) {
|
||
case 'promise':
|
||
this._requestPromise();
|
||
break;
|
||
case 'await':
|
||
this._requestAwait();
|
||
break;
|
||
default:
|
||
this._request();
|
||
break;
|
||
}
|
||
},
|
||
_request() {
|
||
uni.request({
|
||
url: requestUrl,
|
||
dataType: 'text',
|
||
data: {
|
||
noncestr: Date.now()
|
||
},
|
||
success: (res) => {
|
||
console.log('request success', res)
|
||
uni.showToast({
|
||
title: '请求成功',
|
||
icon: 'success',
|
||
mask: true,
|
||
duration: duration
|
||
});
|
||
this.res = '请求结果 : ' + JSON.stringify(res);
|
||
},
|
||
fail: (err) => {
|
||
console.log('request fail', err);
|
||
uni.showModal({
|
||
content: err.errMsg,
|
||
showCancel: false
|
||
});
|
||
},
|
||
complete: () => {
|
||
this.loading = false;
|
||
}
|
||
});
|
||
},
|
||
_requestPromise() {
|
||
// #ifndef VUE3
|
||
uni.request({
|
||
url: requestUrl,
|
||
dataType: 'text',
|
||
data: {
|
||
noncestr: Date.now()
|
||
}
|
||
}).then(res => {
|
||
console.log('request success', res[1]);
|
||
uni.showToast({
|
||
title: '请求成功',
|
||
icon: 'success',
|
||
mask: true,
|
||
duration: duration
|
||
});
|
||
this.res = '请求结果 : ' + JSON.stringify(res[1]);
|
||
this.loading = false;
|
||
}).catch(err => {
|
||
console.log('request fail', err);
|
||
uni.showModal({
|
||
content: err.errMsg,
|
||
showCancel: false
|
||
});
|
||
|
||
this.loading = false;
|
||
});
|
||
// #endif
|
||
|
||
// #ifdef VUE3
|
||
uni.request({
|
||
url: requestUrl,
|
||
dataType: 'text',
|
||
data: {
|
||
noncestr: Date.now()
|
||
}
|
||
}).then(res => {
|
||
console.log('request success', res);
|
||
uni.showToast({
|
||
title: '请求成功',
|
||
icon: 'success',
|
||
mask: true,
|
||
duration: duration
|
||
});
|
||
this.res = '请求结果 : ' + JSON.stringify(res);
|
||
|
||
this.loading = false;
|
||
}).catch(err => {
|
||
console.log('request fail', err);
|
||
uni.showModal({
|
||
content: err.errMsg,
|
||
showCancel: false
|
||
});
|
||
|
||
this.loading = false;
|
||
});
|
||
// #endif
|
||
},
|
||
async _requestAwait() {
|
||
let res, err
|
||
// #ifndef VUE3
|
||
[err, res] = await uni.request({
|
||
url: requestUrl,
|
||
dataType: 'text',
|
||
data: {
|
||
noncestr: Date.now()
|
||
}
|
||
});
|
||
// #endif
|
||
// #ifdef VUE3
|
||
try {
|
||
res = await uni.request({
|
||
url: requestUrl,
|
||
dataType: 'text',
|
||
data: {
|
||
noncestr: Date.now()
|
||
}
|
||
});
|
||
} catch(e){
|
||
err=e
|
||
}
|
||
// #endif
|
||
if (err) {
|
||
console.log('request fail', err);
|
||
uni.showModal({
|
||
content: err.errMsg,
|
||
showCancel: false
|
||
});
|
||
} else {
|
||
console.log('request success', res)
|
||
uni.showToast({
|
||
title: '请求成功',
|
||
icon: 'success',
|
||
mask: true,
|
||
duration: duration
|
||
});
|
||
this.res = '请求结果 : ' + JSON.stringify(res);
|
||
}
|
||
this.loading = false;
|
||
}
|
||
}
|
||
}
|
||
</script>
|