Vue实现页面加载效果

<!DOCTYPE html>
<html>
	<head>
		<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
		<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<div v-if="loading">
				<span>加载请求中 ......</span>
			</div>
			{{info}}
		</div>
		<script>
			new Vue({
				el: "#app",
				data: function(){
					return {
						info: null,
						loading: true,
						errored: false,
					}
				},
				filters: {
					currencyDecimal: function(val){
						return val.toFixed(2);
					}
				},
				mounted() {
					 axios
					      .get('http://httpbin.org/get', "wangzz")
					      .then(response => {
							  console.log(JSON.stringify(response))
					        this.info = response.data.headers;
					      })
					      .catch(error => {
					        console.log(error)
					        this.errored = true
					      })
					      .finally(() => this.loading = false)
				}
			})
		</script>
	</body>
</html>

<!--
		★★★设计一个加载效果，然后在根本无法获取数据的时候通知用户
		
		这样我们就会知道在请求 API 的过程中是否有地方出错了，
		不过当数据长时间生成不出来或 API 不工作的时候会怎样呢？
		现在用户将会什么都看不到。我们可能想为这种情况构建一个加载效果，
		然后在根本无法获取数据时通知用户。
-->

posted @ 2022-07-29 11:06 Felix_Openmind 阅读(1275) 评论(0) 收藏举报

刷新页面返回顶部

Felix_Openmind

https://github.com/serendipitywzz

Vue实现页面加载效果