What is fetch API?

Bruce Gust
Bruce Gust used Ask the Experts™
on
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!
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Chief Technology Ninja
Distinguished Expert 2018
Commented:
Hi Bruce,


Yes. It is the same one.

It is a promise based mechanism to facilitate modern HTTP request / response scenarios. The page you have mentioned is actually a really good reference point to start understanding Fetch in detail.

Regards,
Chinmay.
Bruce GustPHP Developer

Author

Commented:
Thanks!
Chinmay PatelChief Technology Ninja
Distinguished Expert 2018

Commented:
You are welcome :)

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial