uni-app 之 uni.request 网络请求API接口
image.png
<template>
<!-- vue2的<template>里必须要有一个盒子，不能有两个，这里的盒子就是 view-->
<view>
--- uni.request 网络请求API接口 ---
<view>
<!-- 免费的测试接口 -->
<!-- https://dog.ceo/api/breeds/image/random -->
<image :src="picurl" mode="aspectFill" @click="getpicurl"></image>
</view>
--- @click加个点击事件，因为接口是随机获取图片，所以每点一下就随机刷新个图片 ---
</view>
</template>
<script>
export default {
data() {
return {
picurl: ""
}
},
methods: {
getpicurl() {
uni.showLoading({
title: "加载中" // 加个进度条
})
uni.request({
url: "https://dog.ceo/api/breeds/image/random",
success: res => {
console.log(res) // log打印获取的数据
this.picurl = res.data.message
uni.hideLoading() // 图片加载出来后，关闭进度条
}
})
}
},
onLoad() {
// uni.request({
// url: "https://dog.ceo/api/breeds/image/random",
// success: res => {
// console.log(res) // log打印获取的数据
// this.picurl = res.data.message
// }
// })
this.getpicurl()
}
}
</script>
<style lang="scss">
</style>