I've spent several hours trying to figure out how to query an API using fetch, but I can't even seem to get the fetch command to execute.
I'm very new to Javascript so hopefully someone can just point out some dumb mistake because I can't even get past the first step of using fetch.
Here is the very small snippet of code that I can't get to work.
var req = new Request('http://myapp.com:8000/api/posts', {method: 'GET'});
console.log("1");
fetch(req).then(function(res) {
console.log("2");
return res.json();
})
console.log("3");
The console logs "1", and "3", every time, but "2" is never even logged.
Does anyone know what is going on?
Also, I am making fetch requests to a locally running django server, and from monitoring the the server no requests are even being made to the server when I run my react-native app.
Try using fetch directly, see how it is done on the Networking page:
var url = 'http://myapp.com:8000/api/posts';
console.log("1");
fetch(url).then(function(res) {
console.log("2");
return res.json();
})
console.log("3");
Here is another way you can fetch data
fetch("http://date.jsontest.com/")
console.log("1");
.then((response) => response.json())
.then((responseData) => {
console.log("2");
this.setState({date: responseData.date});
})
.done();
}
Try adding a catch to check if there is any error.
fetch(url).then(function(res) {
console.log("2");
return res.json();
}).catch((error) => {
console.error(error);
});
Related
I have a server and a route('/is-working') in which I render simply Yes or No, in React I do a get request with Axios every second with the use of intervals to see if its working.
Here is the code:
useEffect(() => {
const interval = setInterval(async () => {
await axios.get('http://192.168.1.57/is-working')
.then(res => {
if (res?.status === 200) {
// Do somthing
}
})
.catch(err => {
return Promise.reject(err);
})
}, 1000);
return () => clearInterval(interval);
}, []);
I want to count the number of times I get a 200 response back, when I stop hosting http://192.168.1.57/is-working and it returns an network error, until now everything is fine, but when I start hosting http://192.168.1.57/is-working again it does a bunch of get requests all together. It seems its requesting all of the ones that returned network error again.
thanks for the help in advance.
That must be because you didn't defined a timeout for axios client. So, it still trying to request your endpoint, once it comes back it does all request at once
Take a look here: https://github.com/axios/axios#axioscreateconfig
I am trying to speed up the network critical path on a website, and find out about the great <link rel=preload. So I try to anticipate the call that my single page application do as soon as the JS kicks in, I have put in my index.html
<link rel="preload" href="/api/searchItems" as="fetch" />
Then as the JS starts I make the same call with the help of the axios library:
await axios.get(`/api/searchItems`, { params: queryParams });
I would expect to see the call of Axios returning instantly the preloaded JSON file but instead, I see this:
As you can see the same call is loaded twice.
What I am doing wrong?
EDIT: I have added cache-control: public and nothing changes.
EDIT2: I also tried this code instead of axios:
let data = await fetch('/api/searchItems')
.then(response => {
if (response.ok) {
return response.json();
}
throw new Error('HTTP error ' + response.status);
})
.catch(() => {
data = null; // Just clear it and if it errors again when
// you make the call later, handle it then
});
And nothing change
Three options for you:
It looks like your response has headers making it uncacheable for some reason. You may be able to fix it so it's cacheable.
Use a service worker.
Another approach, if this is really critical path, is to have some inline JavaScript that actually does the call and modify the code that will do the call later to look to see if the previous result is available, like this:
let firstLoad = fetch("/api/searchItems")
.then(response => {
if (response.ok) {
return response.json();
}
throw new Error("HTTP error " + response.status);
})
.catch(() => {
firstLoad = null; // Just clear it and if it errors again when
// you make the call later, handle it then
});
(I'm using fetch there because you may want to do it before you've loaded axios.)
Then in the code that wants this data:
(firstLoad || axios.get("/api/searchItems").then(response => response.data))
.then(/*...*/)
.catch(/*...*/);
firstLoad = null;
If the content requires revalidation (and you're using no-cache, so it does¹), #2 and #3 have the advantage of not requiring a second request to the server.
¹ From MDN:
no-cache
The response may be stored by any cache, even if the response is normally non-cacheable. However, the stored response MUST always go through validation with the origin server first before using it...
(my emphasis)
I am building a web app using laravel and vuejs. I have made a axios get request to get a list of users .
I am getting a Promise object, and from what i have read. Reason for getting a promise object is because it's an async request.
I have tried .then() to get data part of the response. But i am getting a huge script instead of desired data.
axios......then(function(response){
console.log(response.data);
})
Initially what i did was
var res = axios.get('/allUsers');
console.log(res)
That time i came to know about promise object and read about.
When i checked network in dev tools, status code is 200 and i can see list of users. So i guess my request is successfully completed.
What should be done to get the list of the users. That list i will be using to update my UI.
Depending on what you're getting back for data there are a few ways to handle this. You may need to convert the data after the you get receive the response.
axios.get('some_url')
.then(res => res.json())
.then(data => {
// do something with the data
}).catch(err) {
conosole.error(err);
}
if you're seeing the data come through properly in the response and you're getting what you need without doing that then just do
axios.get('some url').then(res => {
// do something in here with the data here
})
also make sure you're getting back json if that's what you're looking for. check your response to see if its html or json because they can be handled a bit differently
as an "Edit" you could also handle this with async await so you dont end up in callback hell
async function fetchData() {
try {
const res = await axios.get('some url');
// next step might not be necessary
const data = await res.json();
// do something with the data
console.log(data); // if converting it was necessary
console.log(res); // if not converting
} catch (err) {
console.error(err);
}
}
So I found myself making more than one API call in my vuex action and this let me to wonder what would be the best way to hanfle this situatons, the best practices for multiple API calls, let's begin with the code I have.
I have an action where I gather all posts and all post categories from different API endpoints (laravel for backend), I'm sure there's have to be a better way t hanfle this than how I'm doing it:
fetchAllPosts ({ commit }) {
commit( 'SET_LOAD_STATUS', 1);
axios.get('/posts')
.then((response) => {
commit('FETCH_ALL_POSTS', response.data.posts )
commit( 'SET_LOAD_STATUS', 2 );
},
(error) => {
console.log(error);
commit( 'SET_LOAD_STATUS', 3 );
})
axios.get('/postcategories')
.then((response) => {
commit('FETCH_ALL_POSTCATEGORIES', response.data.postcategories )
commit( 'SET_LOAD_STATUS', 2 );
},
(error) => {
console.log(error);
commit( 'SET_LOAD_STATUS', 3 );
})
},
First issue with my approach that I can think of is if the first API call fails but the second succeeds I will get a load status of 2 (2 equals success here) !
I only want to procced with the commits if BOTH the first and second API call correctly fetch the data, please help someone who is learning.
I think you may want to read about promises.
On your example you are using Axios, which is a Promise based HTTP Client and that's great.
With Promises you can do several requests, and when all requests are successful you can THEN execute code.
With Axios you can do that with .all like this:
axios.all([getPosts(), getPostCategories()])
.then(axios.spread(function (posts, categories) {
// Both requests are now complete
}));
axios.all([
axios.get(firstUrl),
axios.get(secondUrl)
])
.then(axios.spread(function (response1, response2) {
//response1 is the result of first call
//response2 is the result of second call
}))
.catch(function (error) {
});
Note about catch(): It is called on the first failing request omitting the rest of the calls. So if the first call fails, catch() is called without even making the second request.
I have the following HTTP Axios getcall that should result the browser to force a download but I get the a strange result instead.
AXIOS Call
axios.get('http://localhost:63464/api/Consumer/ExcelDownload')
.then(res => {
return res.data;
})
.then(res =>
{
console.log(res);
})
.catch(err =>
{
console.log(err)
})
Which is returning the following result from the line in console.log(res);
Result of console.log(res.data) image Here
I was doing the following in the past to get this to work.
location.href = 'http://localhost:63464/api/Consumer/ExcelDownload';
which would return my File result.
however this route is now protected using a JWT which I have set in axios global headers, so this is no longer working for me.
Would someone be able to help me with this issue?
perhaps even being able to create some kind of URL from a blob that I can make the same call to.