Bruce Gust
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:
I'm looking at line #47. Is it this: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API
Thanks!
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>
I'm looking at line #47. Is it this: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API
Thanks!
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
You are welcome :)
ASKER