thzxcx/FirstUI-vue
1
0
Fork 0
Code Pull Requests Packages Releases Activity

feat: 首次提交

Browse Source
This commit is contained in:
peerless_hero
2023-08-17 21:28:49 +08:00
parent 36f80fb971
commit ec1e5e16cd
571 changed files with 95322 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

167
pages/component/js/request/request.vue Normal file
View File

@ -0,0 +1,167 @@
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号：186 1 4 07 2 54 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
<template>
<view class="fui-wrap">
<view class="fui-page__hd">
<view class="fui-page__title fui-align__center" @tap="vip">Request<image
src="/static/images/index/light/icon_member_3x.png"></image>
</view>
<view class="fui-page__desc">Request 网络请求，支持Promise，可在发起请求和请求响应之前进行拦截，更多使用请参考文档。</view>
</view>
<view class="fui-page__bd">
<fui-button type="gray" btn-size="medium" text="GET 返回全部数据" bold :margin="['24rpx']"
@click="get(false)"></fui-button>
<fui-button type="gray" btn-size="medium" text="GET 返回简洁数据" bold @click="get(true)">
</fui-button>
<fui-button type="gray" btn-size="medium" text="GET 传参数{id}" bold :margin="['24rpx']"
@click="get2">
</fui-button>
<fui-button type="gray" btn-size="medium" text="POST 返回全部数据" bold @click="post(false)">
</fui-button>
<fui-button type="gray" btn-size="medium" text="POST 返回简洁数据" bold :margin="['24rpx']"
@click="post(true)">
</fui-button>
<fui-button type="gray" btn-size="medium" text="自定义接口域名" bold @click="changeHost">
</fui-button>
<fui-button type="gray" btn-size="medium" text="合并多个请求" bold :margin="['24rpx']" @click="all">
</fui-button>
<fui-button type="gray" btn-size="medium" text="同步请求" bold @click="sync">
</fui-button>
<fui-button type="gray" btn-size="medium" text="使用request方法请求" bold :margin="['24rpx']"
@click="request">
</fui-button>
</view>
</view>
</template>
<script>
//该组件已全局引入，请查看文档使用
export default {
data() {
return {
}
},
methods: {
//brief 是否返回简洁数据
get(brief) {
this.http.get('/api/example/info', {
brief: brief
}).then(res => {
console.log(res)
if (brief) {
if (res.succeeded) {
this.fui.toast('请求成功！')
}
} else {
const d = res.data;
if (d.succeeded) {
this.fui.toast('请求成功！')
}
}
}).catch(e => {
console.log(e)
})
},
get2() {
this.http.get('/api/example/info', {
data: {
id: 1
}
}).then(res => {
console.log(res)
const d = res.data;
if (d.succeeded) {
this.fui.toast('请求成功！')
}
}).catch(e => {
console.log(e)
})
},
//brief 是否返回简洁数据
post(brief) {
this.http.post('/api/example/info', {
brief: brief,
data: {
Id: 2,
Name: '张三'
}
}).then(res => {
console.log(res)
if (brief) {
if (res.succeeded) {
this.fui.toast('请求成功！')
}
} else {
const d = res.data;
if (d.succeeded) {
this.fui.toast('请求成功！')
}
}
}).catch(e => {
console.log(e)
})
},
changeHost() {
this.http.get('/api/example/info', {
//此处只是为了演示
host: 'https://ffa.firstui.cn'
}).then(res => {
console.log(res)
const d = res.data;
if (d.succeeded) {
this.fui.toast('请求成功！')
}
}).catch(e => {
console.log(e)
})
},
all() {
//合并多个请求：都返回数据后再进行其他操作
let func1 = this.http.get('/api/example/info')
let func2 = this.http.get('/api/example/info', {
data: {
id: 3
}
})
this.http.all([func1, func2]).then(res => {
console.log(res)
this.fui.toast('请求成功！')
}).catch(e => {})
},
async sync() {
console.log('同步请求start...')
let res = await this.http.get('/api/example/info')
console.log(res)
console.log('同步请求end...')
this.fui.toast('请求成功！')
},
request() {
this.http.request({
url: '/api/example/info',
method: 'GET',
data: {
id: '100'
}
}).then(res => {
console.log(res)
const d = res.data;
if (d.succeeded) {
this.fui.toast('请求成功！')
}
}).catch(e => {})
},
vip() {
this.fui.href("/pages/my/qa/qa?index=2&title=VIP专属内容")
}
}
}
</script>
<style>
.fui-page__bd {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
</style>