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