The following is what I see see pasted elseshere but only shows the promise, want the full response data or the exception.
fetch('http://localhost:8000/data/random?m=2&n=3', {mode: 'no-cors'}).then(res => res.text()).then(console.log)
Promise {<pending>}
Related
I'm testing out some audio worklet code by loading an example module from Github via AudioWorklet.addModule(githubUrl). However when I look at the network tab in developer settings I don't see a network request to Github. I know that it is making the request because it was giving a CORS error before I switched to using raw.githubusercontent address (now it is giving Uncaught (in promise) DOMException: The user aborted a request). I want to be able to inspect what the network call is returning so I can help diagnose the problem.
There seems to be a bug in Chrome which prevents the network request from being shown in the dev tools. I think it would be a good idea to file a bug for that.
For now you could just use Firefox. It shows the network request in the dev tools.
If you want to keep using Chrome you can proxy your request with fetch() to make it appear in the devtools.
Instead of calling addModule() directly ...
context.audioWorklet.addModule(url)
... you could fetch the source first and then wrap it into an object URL.
fetch(url)
.then((response) => response.text())
.then((text) => {
const blob = new Blob([text], { type: 'application/javascript; charset=utf-8' });
const objectUrl = URL.createObjectURL(blob);
return context.audioWorklet.addModule(objectUrl)
.finally(() => URL.revokeObjectURL(objectUrl));
})
I am facing an issue related to loading JSON data.
When I monitor JSON call on Developer Tools of Chrome, I get the following message in the network tab of Chrome Developer Tools.
Caution: request is not finished yet
Attaching a snip for reference:
It is caused by two-step response loading. If you are using some low-level API, make sure that you fetch not only headers, which arrive first, but also body content that comes later as a stream.
I had the same issue when using the fetch function in JavaScript. To solve it, make sure you call a method that reads the body of the response like json() or text():
// Sends request and loads only headers
fetch('/foo');
// Sends request, loads headers and then fetches the body as JSON
fetch('/foo').then(response => response.json());
In my case response headers were also loaded properly and I had a successful HTTP status code, but I was missing the body content and I had Caution: request is not finished yet inside Chrome Developer Tools.
consider removing all extensions and closing all the browser tabs
for me it helped - upon restart, all is well.
So strange
In my case, I needed to use response.text() instead of just using response. The usage of just response yields in "Caution: request is not finished yet"
fetch("API_URL_GOES_HERE", requestOptions)
.then(response => response.text())
.then(result => console.log(result))
A tip here would be: Open Postman's Code snippet and view the actual JS Fetch that is happening.
I ran into this issue due to a programming error that caused an infinite loop in my JavaScript code.
Some time ago Chrome would point out that a script is stuck, but for some reason such a message did not show up in my Chrome. Instead, I found this error in the network tab.
Trying Firefox, it showed the error message "This page is slowing down Firefox. To speed up your browser, stop this page".
This helped me figure out that in my case the issue was not related to the request, but was actually caused by a script running forever.
Apparently, the infinite loop in JavaScript causes Chrome to not finalize the request or at least it does not update this display. I am not sure why Chrome would not show a more meaningful error message that a script is stuck.
after some research I've found that can I make some assertions using 'console.log' (in Chrome) when testing a three.js page.
for example:
console.log(scene)
console.log(camera)
when running those commands I'm getting a JSON array and can check the parameters.
my question is - can I do this through protractor? meaning running the commands and check the response?
EDIT:
I know that I can use console.log for logging the test. but - I can for example going to browser console (chrome for example) and enter:
console.log(window)
when doing that, I get:
{top: Window, window: Window, location: Location, external: Object, chrome: Object…}Infinity: Infinity$: function (a,b){return new e.fn.init(a,b,h)}AnalyserNode: ...
and so on.
I can also enter
console.log(document.URL)
and get
http://stackoverflow.com/posts/28690960/edit
when trying to put the same line in protractor:
console.log(window);
I'm getting this error:
ReferenceError: window is not defined
thanks!
If your question is whether you can use console.log in protractor to log simple objects/variables, then yes, protractor is just javascript.
If your question is how to use console.log properly for promises (i.e. element(by.xyz).getText(), just keep in mind that everything protractor returns are promises, so you'll need to resolve the promise before doing console.log (see Protractor console log)
EDIT: okay, so you want to log objects from your browser. Protractors runs in a different process from your browser, so you would need to retrieve it first before doing console.log
browser.driver.executeScript(function() {
return window;
}).then(function(result) {
console.log('result is: ', result);
});
I am a novice to Angularjs and tried to follow example given for $http.get on angularjs website documentation.
I have a REST service, which when invoked returns data as follows:
http://abc.com:8080/Files/REST/v1/list?&filter=FILE
{
"files": [
{
"filename": "a.json",
"type": "json",
"uploaded_ts": "20130321"
},
{
"filename": "b.xml",
"type": "xml",
"uploaded_ts": "20130321"
}
],
"num_files": 2}
Part of the contents of my index.html file looks like as follows:
<div class="span6" ng-controller="FetchCtrl">
<form class="form-horizontal">
<button class="btn btn-success btn-large" ng-click="fetch()">Search</button>
</form>
<h2>File Names</h2>
<pre>http status code: {{status}}</pre>
<div ng-repeat="file in data.files">
<pre>Filename: {{file.filename}}</pre>
</div>
And my js file looks as follows:
function FetchCtrl($scope, $http, $templateCache) {
$scope.method = 'GET'; $scope.url = 'http://abc.com:8080/Files/REST/v1/list?&filter=FILE';
$scope.fetch = function() {
$scope.code = null;
$scope.response = null;
$http({method: $scope.method, url: $scope.url, cache: $templateCache}).
success(function(data, status) {
$scope.status = status;
$scope.data = data;
}).
error(function(data, status) {
$scope.data = data || "Request failed";
$scope.status = status;
});
};
}
But when I run this, I do not see any result for filenames and I see http status code = 0
When I run , http://abc.com:8080/Files/REST/v1/list?&filter=FILE in browser, I still can see desired results (as mentioned above)
I even tried to debug using Firebug in firefox, I see the above URL gets invoked when I hit "Search" button but response looks to be empty. And interestingly in Firebug under URL, it shows
OPTIONS "Above URL"
instead of
GET "Above URL"
Can you please let me know, what I am doing wrong and why I am not able to access JSON data ?
Thanks,
This is because how angular treats CORS requests (Cross-site HTTP requests). Angular adds some extra HTTP headers by default which is why your are seeing OPTIONS request instead of GET. Try removing X-Requested-With HTTP header by adding this line of code:
delete $http.defaults.headers.common['X-Requested-With'];
Regarding CORS, following is mentioned on Mozilla Developer Network:
The Cross-Origin Resource Sharing standard works by adding new HTTP
headers that allow servers to describe the set of origins that are
permitted to read that information using a web browser.
I have been having the issue using $resource, which also uses $http.
I noticed that when I used AngularJS 1.0.6 the request would not even show up in Firebug, but when using AngularJS 1.1.4 Firebug would show the GET request and the 200 OK response as well as the correct headers, but an empty response. In fact, the headers also showed that the data was coming back as shown by the "Content-Length" header having the correct content length, and comparing this against a REST Client plugin I was using that was successfully retrieving the data.
After being even further suspicious I decided to try a different browser. I had originally been using Firefox 16.0.1 (and also tried 20.0.1), but when I tried IE 9 (and AngularJS 1.1.4) the code worked properly with no issues at all.
Hopefully this will help you find a workaround. In my case, I noticed that I never had this problem with relative URLs, so I'm changing my app around so that both the app and the API are being served on the same port. This could potentially be an AngularJS bug.
I had the same problem today with firefox. IE worked fine. I didn't think it was cors at first because like you I got no errors in the console and got a status of 0 back in my error method in angular. In the firefox console I was getting a 200 response back in my headers and a content length, but no actual response message. Firefox used to give you a warning about cross site scripting that would point you in the right direction.
I resolved the issue by setting up cors on my api. This is really the best way to go.
If you are only using GET with your api you could also try using jsonp this is built right into angular and it is a work around for cors when you do not control the api you are consuming.
$http.jsonp('http://yourapi.com/someurl')
.success(function (data, status, headers, config) {
alert("Hooray!");
})
.error(function (data, status, headers, config) {
alert("Dang It!");
});
It's cross-site-scripting protection.
Try starting google chrome with --disbable-web-security (via command line).
If that isn't working also try to put your angular stuff into an http server instead of using the file protocol. (Tip: use chrome canary if you want to have a browser dedicated to --disable-web-security - of course you'll have to set the command line argument too, but both chrome versions run simultaneously). For release you'll have to set some http headers on the server providing the AngularJS-stuff to allow access to the twitter api or whatever you want to call.
I have an application uses Spring Security 3(has a Jackson Marshaller) runs on a Tomcat 7. I designed my application with Jquery and it runs well. I designed a login page with Ext JS and after successful login it redirects to index.html. However it gives an error and can't redirect because when server sends HTML file it comes into that function at Ext JS:
Ext.util.JSON = new (function(){
...
doDecode = function(json){
return eval("(" + json + ")");
},
...
I wants to render it as a JSON response and gives an error as usual. How to solve it?
PS: It gives that on Firebug:
syntax error
[Break On This Error] (<!DOCTYPE html>
The server is not returning valid JSON. Its look as if it is returning a HTML page (perhaps a friendly error page). If you follow the stack trace up its probably Ext.decode response.responseText (inspect this you'll see whats returned although not the best way)
First step would be to investigate the request in the Net panel in Firebug or Chrome, look at the request and response headers and content this will point you in the right direction. Please please please do not resolve this problem without first learning to use a client side browser debugger (Firebug or Chrome Dev Tools or even Safari) such as walking the stack on break on error, break on XHR, inspect the XHR headers and response etc.. not just watching the console window.
You might be able to fix this continuing blind but you'll pay heavily again next time.