Link to home
Start Free TrialLog in
Avatar of Bruce Gust
Bruce GustFlag for United States of America

asked on

What is fetch API?

I'm going through a tutorial and I want to better understand what "fetch()" is.

The instructor references it as "fetch API" and I am working in a Vue.js context. When I go to google it, I get some Javascript and some npm hits, but I wanted to confirm with some minds greater than my own exactly what this is.

Here's my code:

<template>
	<div>
		<h2>Articles</h2>
		<nav aria-label="Page navigation example">
			<ul class="pagination">
				<li v-bind:class="[{disabled: !pagination.prev_page_url}]" class="page-item">
				<a class="page-link" href="#"
				@click="fetchArticles(pagination.prev_page_url)">Previous</a></li>
				<li class="page-item disabled"><a class="page-link text-dark" href="#">
				Page {{ pagination.current_page }} of {{ pagination.last_page }}</a></li>
				<li v-bind:class="[{disabled: !pagination.next_page_url}]" class="page-item">
				<a class="page-link" href="#"
				@click="fetchArticles(pagination.next_page_url)">Next</a></li>
			</ul>
		</nav>
		<div class="card card-body mb-2" v-for="article in articles" v-bind:key="article.id">
			<h3>{{ article.title }}</h3>
			<p>{{ article.body }}</p>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				articles: [], 
				article: {
					id: '',
					title: '',
					body: ''
				},
				article_id: '',
				pagination: {},
				edit: false
			}
		},
		
		created() {
			this.fetchArticles();
		},
		
		methods: {
			fetchArticles(page_url) {
			let vm = this;
			page_url = page_url || '/api/articles'
				fetch(page_url)
					.then(res => res.json())
					.then(res=> {
						this.articles = res.data;
						vm.makePagination(res.meta, res.links);
					})
					.catch(err => console.log(err));
			},
			makePagination(meta, links) {
				let pagination = {
					current_page: meta.current_page,
					last_page: meta.last_page,
					next_page_url: links.next,
					prev_page_url: links.prev
				}
				
				this.pagination = pagination;
			}
		}
	}
</script>

Open in new window


I'm looking at line #47. Is it this: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API

Thanks!
ASKER CERTIFIED SOLUTION
Avatar of Chinmay Patel
Chinmay Patel
Flag of India image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of Bruce Gust

ASKER

Thanks!
You are welcome :)