-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathpromises.html
executable file
·118 lines (94 loc) · 3.93 KB
/
promises.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
<html>
<head>
<title>Promesas</title>
</head>
<body>
<ul>
<li><button id="sequence">Get Top Movies in Sequence</button></li>
<li><button id="parallel">Get Top Movies in Parallel</button></li>
<li><button id="fastest">Get Fastest Top Movie</button></li>
</ul>
<ul id="movies"></ul>
<script>
// Ejemplo: renderMovies([{ title: "Spider-Man", release_date: "2019-06-30", poster_path: "/rjbNpRMoVvqHmhmksbokcyCr7wn.jpg" }])
// Traducir las funciones de usar thens a usar async/await
// Crear función para que no nos gastemos la cantidad de requests demasiado rapido
// Crear función donde hacemos requests secuenciales
// Crear función donde hacemos requests en paralelo
// Crear función donde obtenemos el primer request que llegue
// The Movie Database API: https://developers.themoviedb.org/3/getting-started/introduction
const apiKey = 'b89fc45c2067cbd33560270639722eae';
async function getMovie(id) {
const url = `https://api.themoviedb.org/3/movie/${id}?api_key=${apiKey}`;
const response = await fetch(url);
const data = await response.json();
return data;
}
async function getPopularMovies() {
const url = `https://api.themoviedb.org/3/discover/movie?sort_by=popularity.desc&api_key=${apiKey}`;
const response = await fetch(url);
const data = await response.json();
return data.results;
}
async function getTopMoviesIds(n = 3) {
// return getPopularMovies().then(popularMovies =>
// popularMovies.slice(0, n).map(movie => movie.id)
// );
// try {
// const popularMovies = await getPopularMovies();
// } catch (error) {
// console.log(error.message)
// }
const popularMovies = await getPopularMovies();
const ids = popularMovies.slice(0, n).map(movie => movie.id);
return ids;
}
function renderMovies(movies) {
const movieList = document.getElementById('movies');
movieList.innerHTML = '';
movies.forEach(movie => {
const listItem = document.createElement('li');
listItem.innerHTML = `
<img src="https://image.tmdb.org/t/p/w342${movie.poster_path}" />
<h5>${movie.title}</h5>
<p>Released on <em>${movie.release_date}</em></p>
`;
movieList.appendChild(listItem);
});
}
async function getTopMoviesInSequence() {
const ids = await getTopMoviesIds();
const movies = [];
for (const id of ids) {
const movie = await getMovie(id);
movies.push(movie);
}
return movies;
}
async function getTopMoviesInParallel() {
const ids = await getTopMoviesIds();
const moviePromises = ids.map(id => getMovie(id));
const movies = await Promise.all(moviePromises);
return movies;
}
async function getFastestTopMovie() {
const ids = await getTopMoviesIds();
const moviePromises = ids.map(id => getMovie(id));
const movie = await Promise.race(moviePromises);
return movie;
}
document.getElementById('sequence').onclick = async function() {
const movies = await getTopMoviesInSequence();
renderMovies(movies);
};
document.getElementById('parallel').onclick = async function() {
const movies = await getTopMoviesInParallel();
renderMovies(movies);
};
document.getElementById('fastest').onclick = async function() {
const movie = await getFastestTopMovie();
renderMovies([movie]);
};
</script>
</body>
</html>