multiple request with fetch and chrome only work with 6 files at a time and other requests will be stalled - javascript

I make a 10 request to the serve with fetch and reload that every 5 sec. After 1 minute the browser is frozen.
Chrom only work with 6 request at the same time and hold all other request stalled.
everything is frozen (scrolling the page, zoom in a map) till the request finished .
Is there a way that Chrom work with all request at the same time?
is there anything that i make wrong?
i tried to work with async fetch and with Xhr request but everywhere the same result.
const headers = new Headers();
headers.set('Content-Type', 'application/json');
let _options = {
credentials: 'include',
cache: 'no-cache',
mode: 'cors',
redirect: 'follow',
referrer: 'no-referrer',
headers
};
fetch(url, _options).then(
response => {
if (response.status !== 200) {
console.log(`Looks like there was a problem. Status Code: ${
response.status}`);
return;
}
// Examine the text in the response
response.json().then(data => data);
}
)
.catch(err => {
console.log('Fetch Error :-S', err);
});
enter image description here

Related

How to log HTTP request and response with ApolloClient

I'm using both ApolloClient from 'apollo-client' and 'apollo-boost' libraries, like
const client = new ApolloClient({
uri: 'https://www.myapp.no/api/',
request: async (operation) => {
console.log(operation)
operation.setContext({
headers: {
authorization: tokenHeader,
'Content-Type': 'application/json'
}
})
},
onError: (error) => {
if (error.graphQLErrors) {
console.log('ApolloClient graphQLErrors')
console.log(graphQLErrors)
}
if (error.networkError) {
console.log('ApolloClient networkError')
console.log(graphQLErrors)
}
}
})
The operation object only show variables and query information. How to log the actual HTTP requests and response under the hood?
I want to see the outgoing request headers and params, and the responses headers and status code
This seems like a very simple task but I've spent quite some time searching without any mentions about this.
You can use this awsome extension https://github.com/apollographql/apollo-client-devtools.
You

React Native “fetch” returning a network error

I am creating an application using react native that works as currently existing website. i am using the "fetch" method to make Http POST requests to the server to return JSON Object.
using this method:
HttpRequest = (RequestURL, callback) => {
var AdminLoginBindingModel = {
usr: this.state.username,
pwd: this.state.password,
}
this.setState({Response: "Performing Fetch..."});
fetch(RequestURL,
{
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify(AdminLoginBindingModel)
})
.then(res => res.json())
.then(obj => callback(obj))
.catch((error) => {
this.setState({displayMessage: "Could Not Connect To Server", Response: "" + error});
})
}
The correct response of a JSON object was being returned. without changing any code only testing it on my home network, as opposed to public network at the university I attend, The request now takes five minutes loading then returns a "Network Request Failed" error.
Does anyone know the cause/solution to this problem?
EDIT:
Testing this application on a 3G mobile network has the same result, a five minute wait then "Network Request Failed" error.

Fetch API body not working

It is a very simple fetch api but for some reason I dont know why the body is not working. here is the code.
<label id="msg"></label>
<label id="msg2"></label>
<script type="text/javascript">
const myRequest = new Request('some url', {
method: 'POST',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify({"email" : "email",
"password" : "password"}),
mode: 'no-cors'});
const myMethod = myRequest.method; // POST
const bodyUsed = myRequest.bodyUsed; // true
fetch(myRequest)
.then(response => {
if (response.status === 200) {
return response.json();
} else {
//throw new Error('Something went wrong on api server!');
}
})
.then(response => {
document.getElementById("msg").innerHTML = response;
document.getElementById("msg2").innerHTML = bodyUsed+" "+myMethod;
}).catch(error => {
document.getElementById("msg").innerHTML = error;
});
</script>
Is there anything I am doing wrong? I have stringify the body, changed the header but still when it runs, it shows false in msg2 label (which is nothing but just the body part of the request, just to be sure). which means the body is actually NaN. where is the problem and whats the solution?
mode: 'no-cors'
This means I do not want to do anything that would require the server to use CORS to grant permissions; do not throw CORS related errors.
Reading the response across origins requires the server grants permissions with CORS.
You said you weren't going to do that, so fetch does not try to make the body available to you.
(You are also prevented from doing anything that would require a preflight request, such as setting the Content-Type request header to JSON.)
Don't set the mode to no-cors.

How to send request to google maps API?

I have my key for google maps api and when i write the url in the browser I get the object. Now when I try to send the request from my app I get this error
Request header field Content-Type is not allowed by
Access-Control-Allow-Headers in preflight response
I do my request with fetch
fetch(url,{
method: "GET",
headers: {
"Content-Type": "application/json"
}
})
.then(async res => {
const data = await res.json();
self.setState({
Zone: data
})
})
.catch(function(err) {
console.log('ERROR!!! ' + err.message);
});`
There is no need to set the header Content-Type in your GET request to Google's API, as you are not sending a POST request with a json body.
And since a request is by default a GET request, you can leave out the options object:
fetch(url)
.then(async res => {
const data = await res.json()
self.setState({
Zone: data
})
})
.catch(function(err) {
console.log('ERROR!!! ' + err.message)
})
There are 2 ways how you can solve your error. The first is using a chrome extension to allow CORS: https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi
The second option is installing the cors npm package and using that inside your javascript

angular 2 post call to return mailbox mail

i am creating a POST request to retrieve back a list of emails in a mailbox to display. I am a little lost on how to properly format my POST request since i am not really submitting any data - for a return i am expecting a json file in which i pull out information from to the view page.
This is what i have in my serviceFile.ts:
getInbox(): Observable<any>{
let headers = new Headers({ 'Content-Type': 'application/json' }); //
let options = new RequestOptions({ headers: headers });
return this._http.post(this.inboxUrl+new Date().getTime(), '', options)
.map((res:Response) => res.json())
.catch(this.handleError);
}
In my component.ts:
getInbox(){
this.serviceFile.getInbox().subscribe(
data => {this.inbox = data;}
)
}
ERROR Handler:
private handleError(error: Response) {
console.error(error);
return Observable.throw(error.json().error || 'Server error');
}
when i run this i get multiple errors:
serviceFile.ts:20 SyntaxError: Unexpected token < in JSON at position 4
at JSON.parse (<anonymous>)
at Response.Body.json (http.umd.js:777)....
core.umd.js:3064 EXCEPTION: error.json is not a function (repeated two more times)
Any advice or guidance... I am thrown off a bit by the fact that even though i really don't have a 'body' to submit yet i still have to make a POST request.

Resources