Explication détaillée de l'utilisation de la requête http et de l'affichage de chargement de Vue2.0

Cette fois, je vais vous apporter une explication détaillée de l'utilisation de la requête http et de l'affichage de chargement de Vue2.0 Quelles sont les précautions lors de l'utilisation de la requête http et de l'affichage de chargement de Vue2.0. Voici un cas pratique, jetons un coup d'œil.

Nous avons besoin de deux dépendances supplémentaires : vuex et axios : (toujours écrites après le projet précédent MyFirstProject)

npm i vuex axios -D

Tout d'abord, expliquez brièvement la requête http

1. Introduisez axios dans main.js

import axios from 'axios' 
Vue.prototype.$http = axios;

2. Écrivez une fonction dans focus.vue pour obtenir les données

<template>
	<p id="focus">
		<ul >
			<li v-for="(item,index) in focusList">
				<p class="fportraits">
					<img :src="&#39;./src/&#39;+item.portrait" :alt="item.name">
				</p>
				<p class="details">
					<p class="ftitle"><strong> {{ item.name }} </strong></p>
					<p> {{ item.production }} </p>
				</p>
				<p class="isfocused">
					<p>取消关注</p>
				</p>
				<p class="clearfix"></p>
			</li>
		</ul>
	</p>
</template>
<script>
	export default{
		data(){
			return {
				focusList:[] //存储请求返回的数据
			}
		},
		mounted(){
			this.getFocusList()
		},
		methods:{
			getFocusList(){   //http get请求data.json 的数据
				var vm = this;
				this.$http.get('src/assets/data/data.json')
					.then(function(res){
						vm.focusList = res.data;
					})
					.catch(function(err){
						console.log(err)
					})
			}
		}
	}
</script>
<style scoped>
#focus{text-align:left;}
#focus ul{margin:0 auto;width:50rem;border-bottom:none;}
#focus p{margin:0;}
#focus li{width:46rem;display:block;border-bottom:1px solid #ddd;padding:0.5rem 2rem;cursor:default;}
#focus img{height:4rem;margin-left:-1rem;}
.fportraits{float:left;width:4rem;height:4rem;border-radius:50%;overflow:hidden;}
.details{float:left;margin-left:1rem;}
.isfocused{float:right;font-size:0.8rem;height:0.8rem;line-height:0.8rem;margin:0;}
.clearfix{clear:both;}
</style>

Mes deux idoles masculines envient et envient si elles sont belles

C'est la fin de la demande de données. N'est-ce pas très simple ? Cependant, lorsqu'il s'agit du magasin, c'est un peu compliqué. Si vous voulez savoir ce qui se passe ensuite, écoutons la répartition la prochaine fois~

.

Je pense que vous avez déjà lu le cas dans cet article. Après avoir maîtrisé la méthode, veuillez prêter attention aux autres articles connexes sur le site Web php chinois pour un contenu plus passionnant !

Lecture recommandée :

Étapes détaillées pour l'utilisation des requêtes inter-domaines jQuery+JSONP

processus du nœud et modules child_process détaillés explication d'utilisation

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!