aurelia / fetch-client Goto Github PK
View Code? Open in Web Editor NEWAn HTTP Client based on the Fetch standard.
License: MIT License
An HTTP Client based on the Fetch standard.
License: MIT License
Hi,
We have an application that gets data from a remote backend encoded with charset ISO-8859-1. With jQuery ajax we could set the dataType settings paramater to "json" and it automatically transforms the received stream to UTF-8. Is there anyway to handle this issue with the fetch client plugin?
request.headers.set('Content-Type', body.type);
not work
I am getting following error only in IE
SCRIPT5009: 'Headers' is undefined
File: aurelia-fetch-client.js, Line: 90, Column: 7
this is the line in aurelia-fetch-client.js , where i am getting the error:
if (defaults && defaults.headers instaehnceof Headers) {
Any solution, or i am doing something wrong...
I am using Typescript as my language to code. I have also looked into the d.ts file its also right.
Hey!
I just got an interesting question concerning our aurelia-api module. We use the json util on the request body which appears to not work in some version of IE (9 and lower, 10 not sure) because they don't support Blob.
Why does util make it a blob to begin with? I'm trying to understand if changing it to JSON.stringify() would have any implications.
Not sure if this is a bug, a choice or a misunderstanding.
I'm currently writing a simple api client on top of the fetch client. The api requires a JWT header for authentication and using .withDefaults()
is a really nice way of doing this:
constructor(http, auth) {
this.auth = auth;
this.client = http
.configure(config => {
config
.withDefaults({
headers: {
'Authorization': `Bearer ${this.auth.getToken()}`
}
});
});
}
The only issue with this is that my JWTs expire/renew every hour so the default Authorization
header string will expire. Users have to refresh the page to get the api client to use the new token.
You can easily work around this by wrapping fetch with your own method that manually sets the token header for each request, however this isn't quite as seamless as using .withDefaults()
.
I think it would be really neat if the default headers object allowed the header values to be set as a function to be evaluated on each request. I have a modified version of fetch-client
that allows the following usage:
constructor(http, auth) {
this.auth = auth;
this.client = http
.configure(config => {
config
.withDefaults({
headers: {
'Authorization': () => `Bearer ${this.auth.getToken()}`
}
});
});
}
Unless I've missed something obvious it seems like this could be a common problem people might have. Is this something you'd be interested in accepting a pull request for?
I added the fetch-client to my project and somehow the dependency to the project github/fetch was not resolved. I added it manually with "jspm install fetch" and the fetching as you demonstrate here started to work again: https://github.com/aurelia/skeleton-navigation/blob/master/src/users.js
Would it make sense to add an option to the config of fetch client to get the json so instead of
httpClient.fetch('package.json')
.then(response => response.json())
.then(data => {
console.log(data.description);
});
You could do something like this in the configure
httpClient.configure(config => {
config
.getJsonFromResponse()
});
and do this instead
httpClient.fetch('package.json')
.then(data => {
console.log(data.description);
});
If you're accessing a json api you'll probably end parsing json on every request anyway...
I'm submitting a bug report
Current behavior:
When trying to use the same piece of code that properly runs on Chrome and FF (no need for polyfills) IE 11 does not seem to add the specified headers.
polyfill added (taken from ts-webpack-skeleton)
const fetch = !self.fetch ? System.import('isomorphic-fetch') : Promise.resolve(self.fetch);
example:
async myMethod(): Promise<any> {
await fetch;
const response = await this.httpClient.fetch('myUrl', {
headers: {
'My-Custom-Header': ''
}
});
}
I know this is probably related to the fetch polyfill provided within isomorphic-fetch.
Does anyone got this? Workarounds? Other suggested polyfill libraries?
Cheers,
Enrico
Was doc/whatwg-fetch.d.ts
added through any kind of tooling, or was a static copy included? I'm trying to get DefinitelyTyped/DefinitelyTyped/pull/8887 merged in here, but I'm not sure how to go about it.
So i am trying to send form data to my server (Asp.net server), but when debuging the server only the typed information is received, but the files are not there.
This is my html page:
http://pastebin.com/KZERsepn
and this is how i am posting the data:
http://pastebin.com/7bVHZthE
But only the user.name and user.youtubeurl properties are sent to the server.
The documentation is pretty clear on how to set http-client request headers globally, but not for the fetch-client... How do we go about setting for example the Authorization Header for all requests with fetch-client?
Usign interceptors in angular when the request is error I show on display the error, but now usign this library in responseError Method when I call to response.json I receive Uncaught (in promise) SyntaxError: Unexpected token N
error
How is the best form to use the interceptors to display error messages whitout promises ?
When calling configure(function(config))
the config
parameter should be passed with values currently configured
Hi,
I'm having trouble with downloading json files with aurelia-fetch-client. I'm having a really big delay between when retrieving these files as shown below:
This only happens in Microsoft Edge. Chrome is working well.
I've tried with xmlhttprequest too and having the same problem. I couldn't find the problem...
I'm submitting a bug report
Please tell us about your environment:
Operating System:
Windows 10 - Anniversary Update
Node Version:
6.2.0
NPM Version:
3.10.8
JSPM OR Webpack AND Version
N/A - Using Aurelia CLI 0.20.2
Browser:
Chrome 53.0.2785.143 m | Firefox 47.0.1 | IE 11
Language:
TypeScript 2.0.3
Current behavior:
When the browser receives a non-200 response from the server, an exception is thrown of type Response. This causes the browser to display a warning in the console saying that a promise was rejected with a non-error.
Warning: a promise was rejected with a non-error: [object Response]
Expected/desired behavior:
I'm submitting a version request
If multiple interceptors are installed in the fetch client, only one of them can call response.json(). The second one to call causes an "already read" exception. I suppose that makes some sense from a stream reading perspective, but it doesn't make sense if multiple interceptors are allowed. Obviously, it would not be uncommon to want to read at least part of the response in both places.
Maybe a configure
option for caching the json in the client for mulitple access would be a solution?
This a pretty annoying error that pops up when you use a bluebird drop in replacement for Promise
. It seems to indicate that in this piece of code: https://github.com/aurelia/fetch-client/blob/master/src/http-client.js#L220, you actually end up passing .then(undefined, undefined)
(rather than what I think you expect to be .then(null, null)
?) if the interceptors don't exist.
I am loading my Aurelia App via HTTPS. In my App I will load a resource from a location two folders above the App location. Thus I use a relative URI with "../../". If I load the App via HTTP this works perfectly. But in HTTPS this relative fetch does revert to HTTP instead of HTTPS. As a result I will get the mixed content warning and the fetch-client will block the download.
this.http.fetch("../../folder/xy", {
method: 'get',
dataType: 'xml'
})
Excepted behaviour: use the location of the App to identify the correct connection type for relative URI (HTTP, HTTPS).
I'm submitting a bug report
I'm having trouble with Edge and I can't retrieve data from API.
Every time I get a TypeMismatchError
with no other details about the error.
I breakpointed the API, but the requests don't reach it.
Everything works great on other browsers (tested on IE11, Firefox and Chrome).
Stackoverflow
http://stackoverflow.com/questions/39960440/typemismatcherror-on-post
Hi,
I get some problem for put in the headers a content-type.
This example work fine :
var myHeaders = new Headers();
myHeaders.append('Content-Type', 'application/json;charset=UTF-8');
this.http.configure(config => {
config.withBaseUrl(url)
}).fetch('/method', {
method: "post",
headers: myHeaders,
body: data
});
But when i try to use the withDefaults method the content-type is ignored :
this.http.configure(config => {
config.withBaseUrl(url)
.withDefaults({method: 'POST', headers: {'Content-Type': 'application/json;charset=UTF-8'}, body: data})
}).fetch('/method');
And like you see with method withDefaults we can't use Headers object because :
Uncaught Error: Default headers must be a plain object. in aurelia-fetch-client.js:96
Thanks
Cali03
Hello,
All the aurelia packages are on bower except this one (aurelia-fetch-client)
http://bower.io/search/?q=aurelia-fetch-client
Could you please add it?
Thanks
Hi there, we're having issues using the fetch-client library in safari. It fails as soon as we try to configure the client, please have a look @ http://embed.plnkr.co/wc2GDF for a basic sample. We also tried to configure the library using property setters instead of passing in a lambda expression, but then any subsequent "fetch" operation fails.
Thanks,
Javier.
Here is my project: https://github.com/DiegoGallegos4/aurelia-test
It is connected to a real server but I think that dummy data can be passed to it instead of fetching on the service. The issue is the following:
You can repeat this and watch this happening.
please close
Thank you for your excellent work on Aurelia and all her components.
After testing typescript and fetch-client I believe the definition file need a tiny change.
This wont compile (from https://gist.github.com/bryanrsmith/14caed2015b9c54e70c3):
httpClient.configure(config => {
config
.withBaseUrl('api/')
.withDefaults({
credentials: 'same-origin',
headers: {
'Accept': 'application/json',
'X-Requested-With': 'Fetch'
}
})
.withInterceptor({
request(request) {
console.log(`Requesting ${request.method} ${request.url}`);
return request; // you can return a modified Request, or you can short-circuit the request by returning a Response
},
response(response) {
console.log(`Received ${response.status} ${response.url}`);
return response; // you can return a modified Response
}
});
});
From aurelia-fetch-client.d.ts:
79. withInterceptor(interceptor: Interceptor): HttpClientConfiguration;
and
4. /* eslint-disable */
export interface Interceptor {
request(request: Request): Request | Response | Promise<Request | Response>;
requestError(error: any): Request | Response | Promise<Request | Response>;
response(response: Response): Response | Promise<Response>;
responseError(error: any): Response | Promise<Response>;
}
I have not read the source (yet) but I don't think its necessary to define all Interceptors. Compiling/running project with suggested change work.
Change suggestion (add '?'):
4. /* eslint-disable */
export interface Interceptor {
request?(request: Request): Request | Response | Promise<Request | Response>;
requestError?(error: any): Request | Response | Promise<Request | Response>;
response?(response: Response): Response | Promise<Response>;
responseError?(error: any): Response | Promise<Response>;
}
When I switched from the http client to the fetch client I had some issues setting default headers in main.ts using TypeScript to make things work in Firefox (which seem to default to xml rather than json) equivalent to this:
aurelia.container.registerInstance(HttpClient, new HttpClient().configure(builder => builder.withHeader("Accept": "application/json", "Content-Type": "application/json")))
When setting headers using RequestInit as a second parameter to fetch it worked just fine like:
const headers = new Headers();
headers.append("Accept", "application/json");
headers.append("Content-Type", "application/json");
this.http.fetch("api/mymethod", {
method: "post",
headers: headers,
body: JSON.stringify(data)
});
But when I tried it similar in the configure method:
const headers = new Headers();
headers.append("Accept", "application/json");
headers.append("Content-Type", "application/json");
aurelia.container.registerInstance(HttpClient, new HttpClient().configure(builder => builder.withDefaults({headers: headers})));
I got errors telling me that Default headers must be a plain object.
.
After trying some different approaches I got a tip in the gitter chat that I should do like this:
aurelia.container.registerInstance(HttpClient, new HttpClient().configure(builder => builder.withDefaults({ headers: { "Accept": "application/json", "Content-Type": "application/json"}})));
But since headers in RequestInit expects a Headers object which isn't a plain object I got stuck until I changed headers?: Headers
to headers?: Headers | Object
for RequestInit in aurelia-fetch-client.d.ts.
So now all is fine for me, but I suppose there is some fixing needing to be done here. I suppose you either should change the type of headers in RequestInit to allow plain objects or allow a Headers object to be passed in to the header property or however you want to solve it?
I think the README should explain better differences between http-client
and fetch-client
, APIs and features. Which is better to use and when?
fetch(input, init)
can accept either a url as the first param with an optional init object for the second, or a single Request
object if the caller wants to create the Request
manually. If the caller supplies a url + init, we can merge the configured defaults
object into the supplied init object before creating the Request
. If the caller supplies a Request
, though, that class supplies its own defaults and discards the original init object, so we can't tell which properties were specified by the user (but happen to align with Request
's defaults) and which properties were omitted by the user and provided by Request
. This makes it unsafe to merge our defaults
into the Request
.
Example:
client.configure(c => c.withDefaults({ mode: 'same-origin' }));
client.fetch(new Request('test'), { mode: 'cors' });
mode: 'cors'
was explicitly specified, but since that's the default anyways we have no way to know if we should override it with the default of mode: 'same-origin'
.
defaults
with overrides
.defaults
and overrides
, documenting that you may want to use overrides
if you manually create Requests
.Hi, apologies for such a trivial problem but I'm really scratching my head here.
In my view model I configure the fetch client (example is attempting Github OAuth) like so:
constructor(
http
) {
http.configure(config => {
config
.useStandardConfiguration()
.withBaseUrl('https://github.com/')
.withDefaults({
mode: 'no-cors',
headers: {
'Accept': 'application/json'
}
});
});
this.http = http;
}
requestAccessToken() {
let url = 'login/oauth/access_token';
url += `?client_id=${ this.client_id }`;
url += `&client_secret=${ this.client_secret }`;
url += `&code=${ this.oauth_code }`;
return this.http.fetch(url, {
method: 'POST',
});
}
The request returns a 200 status with the appropriate body, however the Promise
returned is always rejected and I am unable to access the response. i.e.
requestAccessToken()
.then(
response => {
// Never invoked
},
error => {
// Always invoked
}
);
Hi there,
it seems that the aurelia fetch client doesn't handle "null body statuses" (in my case "204") in a proper way. E.g., if I call my api (PUT request, response is "Status Code": 204 with body = null):
httpClient.fetch(requestUri, reqInit) // method: PUT
.then(response => {
// never called
}
.catch((err) => {
console.error(err); // --> SyntaxError: Unexpected end of input {message: "Unexpected end of input"}
});
In the reponse, the body is null. So I guess that is the problem.
To check the handling, I switched the status code for testing purposes to "200" with content set in the body. Everything works fine with that configuration.
Please have a look at the issue.
Many thanks,
Chris
Hi,
I'm facing an issue while trying to make httpPost request.
It always returns 401 Unauthorized error.
We are using token based authentication from our server(Apache Tomcat7) with SpringSecurity plugin for generating authToken.
Below is how I configured HttpClient.
In constructor, I made httpClient configuration.
`@inject(HttpClient)
export default class UtilService {
constructor(http) {
// Configure the HttpClient globally ( in entire app)
http.configure(_http => {
_http
.useStandardConfiguration()
.withBaseUrl(config.baseUrl)
.withDefaults({
credentials: "same-origin",
headers: {
"Content-Type": "application/x-www-form-urlencoded",
"X-Requested-With": "Fetch",
"Accept": "*/*",
"Authorization": "Bearer "+localStorage[config.tokenName]
}
})
.withInterceptor({
responseError(error) {
if (error.status && error.status === 401) {
console.log("error recorded:"+error)
}
throw error;
}
});
});
this.http = http;
}
}`
And calling function:
`profileInfo(url, paramsObj) {
// url = http://localhost:8082/xyz/api/v1/profileInfo
// paramsObj = {access_token : localStorage[config.tokenName]};
return this.http.fetch(url, {
method: "POST",
body: $.param(paramsObj)
}).catch(err=>{
console.log("failure:"+err);
throw err
});
}`
I tried the same rest call with DHC (Chrome Extension) and everything works fine there.
I think problem might be with Headers.
Can you please suggest whether I missed adding any header entry ?
Please help.
probably this line https://github.com/aurelia/fetch-client/blob/master/dist/aurelia-fetch-client.d.ts#L2
should probably be
import 'core-js';
But there are more problems with the definitions after fixing it:
jspm_packages\github\aurelia\[email protected]\aurelia-fetch-client.d.ts(6,32): error TS2304: Cannot find name 'undefined'.
jspm_packages\github\aurelia\[email protected]\aurelia-fetch-client.d.ts(7,31): error TS2304: Cannot find name 'undefined'.
jspm_packages\github\aurelia\[email protected]\aurelia-fetch-client.d.ts(8,35): error TS2304: Cannot find name 'undefined'.
jspm_packages\github\aurelia\[email protected]\aurelia-fetch-client.d.ts(9,32): error TS2304: Cannot find name 'undefined'.
jspm_packages\github\aurelia\[email protected]\aurelia-fetch-client.d.ts(14,19): error TS2304: Cannot find name 'BufferSource'.
jspm_packages\github\aurelia\[email protected]\aurelia-fetch-client.d.ts(14,45): error TS2304: Cannot find name 'URLSearchParams'.
I haven't investigated how d.ts files are generated, but it looks like generator doesn't understand function return type from this file
https://github.com/aurelia/fetch-client/blob/master/src/interfaces.js#L4-L10
and because of it undefined
is used as a return type (that is even not a valid return type)
I'm submitting a bug report
Please tell us about your environment:
Operating System:
Windows 10
Node Version:
4.4.5
NPM Version:
2.15.5 (npm -v)
3.9.6 (npm3 -v)
JSPM OR Webpack AND Version
JSPM 0.16.39
Language:
TypeScript 2.0.0
Current behavior:
Running an asp.net core app with Aurelia CLI
Trying to use aurelia-fetch-client (is present in node_modules)
Note: same process using aurelia-http-client builds fine.
au build throws the following errors:
$ au build
Starting 'readProjectConfiguration'...
Finished 'readProjectConfiguration'
Starting 'processMarkup'...
Starting 'processCSS'...
Starting 'configureEnvironment'...
Finished 'processCSS'
Finished 'configureEnvironment'
Starting 'buildTypeScript'...
Finished 'processMarkup'
path-to-app/node_modules/aurelia-fetch-client/dist/aurelia-fetch-client.d.ts(17,23): error TS2304: Cannot find name 'Request'.
[11:32:13] gulp-notify: [Error running Gulp] Error: path-to-app/node_modules/aurelia-fetch-client/dist/aurelia-fetch-client.d.ts(17,23): error TS2304: Cannot find name 'Request'.
path-to-app/node_modules/aurelia-fetch-client/dist/aurelia-fetch-client.d.ts(17,35): error TS2304: Cannot find name 'Request'.
[11:32:13] gulp-notify: [Error running Gulp] Error: path-to-app/node_modules/aurelia-fetch-client/dist/aurelia-fetch-client.d.ts(17,35): error TS2304: Cannot find name 'Request'.
path-to-app/node_modules/aurelia-fetch-client/dist/aurelia-fetch-client.d.ts(17,45): error TS2304: Cannot find name 'Response'.
[11:32:13] gulp-notify: [Error running Gulp] Error: path-to-app/node_modules/aurelia-fetch-client/dist/aurelia-fetch-client.d.ts(17,45): error TS2304: Cannot find name 'Response'.
path-to-app/node_modules/aurelia-fetch-client/dist/aurelia-fetch-client.d.ts(17,64): error TS2304: Cannot find name 'Request'.
[11:32:13] gulp-notify: [Error running Gulp] Error: path-to-app/node_modules/aurelia-fetch-client/dist/aurelia-fetch-client.d.ts(17,64): error TS2304: Cannot find name 'Request'.
path-to-app/node_modules/aurelia-fetch-client/dist/aurelia-fetch-client.d.ts(17,74): error TS2304: Cannot find name 'Response'.
[11:32:13] gulp-notify: [Error running Gulp] Error: path-to-app/node_modules/aurelia-fetch-client/dist/aurelia-fetch-client.d.ts(17,74): error TS2304: Cannot find name 'Response'.
path-to-app/node_modules/aurelia-fetch-client/dist/aurelia-fetch-client.d.ts(27,34): error TS2304: Cannot find name 'Request'.
[11:32:13] gulp-notify: [Error running Gulp] Error: path-to-app/node_modules/aurelia-fetch-client/dist/aurelia-fetch-client.d.ts(27,34): error TS2304: Cannot find name 'Request'.
path-to-app/node_modules/aurelia-fetch-client/dist/aurelia-fetch-client.d.ts(27,44): error TS2304: Cannot find name 'Response'.
[11:32:13] gulp-notify: [Error running Gulp] Error: path-to-app/node_modules/aurelia-fetch-client/dist/aurelia-fetch-client.d.ts(27,44): error TS2304: Cannot find name 'Response'.
path-to-app/node_modules/aurelia-fetch-client/dist/aurelia-fetch-client.d.ts(27,63): error TS2304: Cannot find name 'Request'.
[11:32:13] gulp-notify: [Error running Gulp] Error: path-to-app/node_modules/aurelia-fetch-client/dist/aurelia-fetch-client.d.ts(27,63): error TS2304: Cannot find name 'Request'.
path-to-app/node_modules/aurelia-fetch-client/dist/aurelia-fetch-client.d.ts(27,73): error TS2304: Cannot find name 'Response'.
[11:32:14] gulp-notify: [Error running Gulp] Error: path-to-app/node_modules/aurelia-fetch-client/dist/aurelia-fetch-client.d.ts(27,73): error TS2304: Cannot find name 'Response'.
path-to-app/node_modules/aurelia-fetch-client/dist/aurelia-fetch-client.d.ts(36,25): error TS2304: Cannot find name 'Response'.
[11:32:14] gulp-notify: [Error running Gulp] Error: path-to-app/node_modules/aurelia-fetch-client/dist/aurelia-fetch-client.d.ts(36,25): error TS2304: Cannot find name 'Response'.
path-to-app/node_modules/aurelia-fetch-client/dist/aurelia-fetch-client.d.ts(36,45): error TS2304: Cannot find name 'Request'.
[11:32:14] gulp-notify: [Error running Gulp] Error: path-to-app/node_modules/aurelia-fetch-client/dist/aurelia-fetch-client.d.ts(36,45): error TS2304: Cannot find name 'Request'.
path-to-app/node_modules/aurelia-fetch-client/dist/aurelia-fetch-client.d.ts(36,57): error TS2304: Cannot find name 'Response'.
[11:32:14] gulp-notify: [Error running Gulp] Error: path-to-app/node_modules/aurelia-fetch-client/dist/aurelia-fetch-client.d.ts(36,57): error TS2304: Cannot find name 'Response'.
path-to-app/node_modules/aurelia-fetch-client/dist/aurelia-fetch-client.d.ts(36,76): error TS2304: Cannot find name 'Response'.
[11:32:14] gulp-notify: [Error running Gulp] Error: path-to-app/node_modules/aurelia-fetch-client/dist/aurelia-fetch-client.d.ts(36,76): error TS2304: Cannot find name 'Response'.
path-to-app/node_modules/aurelia-fetch-client/dist/aurelia-fetch-client.d.ts(47,42): error TS2304: Cannot find name 'Request'.
[11:32:14] gulp-notify: [Error running Gulp] Error: path-to-app/node_modules/aurelia-fetch-client/dist/aurelia-fetch-client.d.ts(47,42): error TS2304: Cannot find name 'Request'.
path-to-app/node_modules/aurelia-fetch-client/dist/aurelia-fetch-client.d.ts(47,54): error TS2304: Cannot find name 'Response'.
[11:32:14] gulp-notify: [Error running Gulp] Error: path-to-app/node_modules/aurelia-fetch-client/dist/aurelia-fetch-client.d.ts(47,54): error TS2304: Cannot find name 'Response'.
path-to-app/node_modules/aurelia-fetch-client/dist/aurelia-fetch-client.d.ts(47,73): error TS2304: Cannot find name 'Response'.
[11:32:14] gulp-notify: [Error running Gulp] Error: path-to-app/node_modules/aurelia-fetch-client/dist/aurelia-fetch-client.d.ts(47,73): error TS2304: Cannot find name 'Response'.
path-to-app/node_modules/aurelia-fetch-client/dist/aurelia-fetch-client.d.ts(68,13): error TS2304: Cannot find name 'Headers'.
[11:32:14] gulp-notify: [Error running Gulp] Error: path-to-app/node_modules/aurelia-fetch-client/dist/aurelia-fetch-client.d.ts(68,13): error TS2304: Cannot find name 'Headers'.
path-to-app/node_modules/aurelia-fetch-client/dist/aurelia-fetch-client.d.ts(73,43): error TS2304: Cannot find name 'URLSearchParams'.
[11:32:14] gulp-notify: [Error running Gulp] Error: path-to-app/node_modules/aurelia-fetch-client/dist/aurelia-fetch-client.d.ts(73,43): error TS2304: Cannot find name 'URLSearchParams'.
path-to-app/node_modules/aurelia-fetch-client/dist/aurelia-fetch-client.d.ts(258,16): error TS2304: Cannot find name 'Request'.
[11:32:14] gulp-notify: [Error running Gulp] Error: path-to-app/node_modules/aurelia-fetch-client/dist/aurelia-fetch-client.d.ts(258,16): error TS2304: Cannot find name 'Request'.
path-to-app/node_modules/aurelia-fetch-client/dist/aurelia-fetch-client.d.ts(258,63): error TS2304: Cannot find name 'Response'.
[11:32:15] gulp-notify: [Error running Gulp] Error: path-to-app/node_modules/aurelia-fetch-client/dist/aurelia-fetch-client.d.ts(258,63): error TS2304: Cannot find name 'Response'.
[11:32:15] TypeScript: 20 semantic errors
[11:32:15] TypeScript: emit succeeded (with errors)
Finished 'buildTypeScript'
Starting 'writeBundles'...
Tracing environment...
Tracing main...
...
Overview of the issue:
I cannot seem to find any way to catch the HTTP Status code of a request which errors out (i.e. 4XX, 5XX codes). A Gist outlining the issue: https://gist.run/?id=7ef33f0d8f481e45417fa7544f4782fe
Motivation/Use Case:
When using the fetch client with an API, the server may reply with status codes which provide some context beyond "error", such as 401 indicating unauthorised, when we might need more of a specifc behaviour (check auth credentials are still valid) rather than just "Failed to fetch, sorry"
It appears as if it was previously working as evidenced by some code using response.status
:
I'm submitting a bug report
Current behavior:
HttpClient.applyInterceptors always resolves the promise.
Expected/desired behavior:
HttpClient.applyInterceptors should reject promises yet still try and finish the code given in responeError and requestError.
Example
A custom 4XX response is returned with a helpful message pertaining to the error, such as "Unable to login". That information must be parsed with json() but there is no intermediary step to do so. Currently the promise is returned and then left up to the consumer to parse the results on every request but defaults should allow for this to take place every time.
What happened to these bad boys?
this.http = new HttpClient().configure(x=> {
x.withReviver((k,v) => {
return typeof v === 'object' ? new Person(v) : v;
});
});
when using aurelia-fetch-client as a jspm package the aurelia-fetch-client.d.ts causes the following errors on build:
jspm_packages\npm\[email protected]\aurelia-fetch-client.d.ts(18,25): error TS2304: Cannot find name 'Request'.
jspm_packages\npm\[email protected]\aurelia-fetch-client.d.ts(18,37): error TS2304: Cannot find name 'Request'.
jspm_packages\npm\[email protected]\aurelia-fetch-client.d.ts(18,47): error TS2304: Cannot find name 'Response'.
jspm_packages\npm\[email protected]\aurelia-fetch-client.d.ts(18,66): error TS2304: Cannot find name 'Request'.
jspm_packages\npm\[email protected]\aurelia-fetch-client.d.ts(18,76): error TS2304: Cannot find name 'Response'.
jspm_packages\npm\[email protected]\aurelia-fetch-client.d.ts(27,36): error TS2304: Cannot find name 'Request'.
jspm_packages\npm\[email protected]\aurelia-fetch-client.d.ts(27,46): error TS2304: Cannot find name 'Response'.
jspm_packages\npm\[email protected]\aurelia-fetch-client.d.ts(27,65): error TS2304: Cannot find name 'Request'.
jspm_packages\npm\[email protected]\aurelia-fetch-client.d.ts(27,75): error TS2304: Cannot find name 'Response'.
jspm_packages\npm\[email protected]\aurelia-fetch-client.d.ts(35,27): error TS2304: Cannot find name 'Response'.
jspm_packages\npm\[email protected]\aurelia-fetch-client.d.ts(35,40): error TS2304: Cannot find name 'Response'.
jspm_packages\npm\[email protected]\aurelia-fetch-client.d.ts(35,59): error TS2304: Cannot find name 'Response'.
jspm_packages\npm\[email protected]\aurelia-fetch-client.d.ts(45,37): error TS2304: Cannot find name 'Response'.
jspm_packages\npm\[email protected]\aurelia-fetch-client.d.ts(45,56): error TS2304: Cannot find name 'Response'.
jspm_packages\npm\[email protected]\aurelia-fetch-client.d.ts(54,15): error TS2304: Cannot find name 'Headers'.
jspm_packages\npm\[email protected]\aurelia-fetch-client.d.ts(55,19): error TS2304: Cannot find name 'BufferSource'.
jspm_packages\npm\[email protected]\aurelia-fetch-client.d.ts(55,45): error TS2304: Cannot find name 'URLSearchParams'.
jspm_packages\npm\[email protected]\aurelia-fetch-client.d.ts(201,18): error TS2304: Cannot find name 'Request'.
jspm_packages\npm\[email protected]\aurelia-fetch-client.d.ts(201,65): error TS2304: Cannot find name 'Response'.
can be related to #19
Request and Response declarations has been removed from the d.ts file
One thing I found very helpful in Angular 1 was the $httpBackend
service. This provides a fake HTTP backend to verify requests made by the unit under test. If, for instance, the code to test does this:
// The controller code
function MyController($scope, $http) {
var authToken;
$http.get('/auth.py').then(function(response) {
authToken = response.headers('A-Token');
$scope.user = response.data;
});
}
then the test could be:
// testing controller
describe('MyController', function() {
beforeEach(inject(function($httpBackend) {
...
authRequestHandler = $httpBackend.when('GET', '/auth.py')
.respond({userId: 'userX'}, {'A-Token': 'xxx'});
}));
afterEach(function() {
$httpBackend.verifyNoOutstandingExpectation();
$httpBackend.verifyNoOutstandingRequest();
});
it('should fetch authentication token', function() {
$httpBackend.expectGET('/auth.py');
var controller = createController();
$httpBackend.flush();
});
});
It would be very helpful to have something similar for the fetch-client.
It appears that the types related to the native fetch apis are not know to TypeScript. As a result, we cannot properly generate docs for the fetch-client library. We need to add a d.ts file to represent these types to the dist folder so that doc generation will work.
I've been upgrading from pre-beta to beta1, I was a bit upset migrating aurelia-http-client
to the new aurelia-fetch-client
primarily because I feel the raw fetch API a step backwards from the simplicity we got to know in the original aurelia-http-client
.
For example, take a look at how much setup is required to fire-off a JSON POST
:
this.http.fetch(`${baseUrl}/ExternalLogins`, {
method: "POST",
headers: {
"Content-Type": "application/json; charset=utf-8"
},
body: JSON.stringify({
returnUrl: "/app",
generateState: false
})
})
method: POST
Content-Type
body
paypload.Now, compare this to aurelia-http-client
:
this.http
.createRequest(`${baseUrl}/ExternalLogins`)
.asGet()
.withParams({ returnUrl: "/app", generateState: false })
.send();
I _really_ think we need some helpers to help common use cases like POST
ing JSON. Something that helps set content-type, method, and auto-body json encoding if it encounters a POJO.
Seems typescript intellisence is having trouble recognizing enum member when they have an hyphen in their name.
Example
declare enum RequestMode { "same-origin", "no-cors", "cors" }
Vs2013 intellisence cannot recognize "same-origin" and "no-cors".
Havent verified with 2015.
I could fix it by changing names but want to be sure it would not be too consequential.
The general issue is that I cannot set the request mode to no-cors if I want avoid resource sharing issues during development/experimentation with Aurelia
Thanks
It would be great if I could register a progress callback for file uploads. I think (according to this aurelia/http-client#104) http-client
has .withProgressCallback()
. Is there an equivalent for fetch-client
?
Could the Interceptor.response and (especially) responseError methods be extended to include the original request? This would allow us to implement 401 handling with retry as can be done with http-client using HttpResponseMessage.requestMessage.
In the existing documentation about the aurelia-fetch-client it isn't really clear to us TypeScript users that we need to include the special version of whatwg-fetch.d.ts included in the docs folder of this project to be able to compile it.
We also need Promise declared somewhere both for this and other libraries. Earlier I've used one of @cmichaelgraham's es6.d.ts files (that also included Map used by aurelia-dependency-injection), but Promise also exists in es6-promise.d.ts whose reference is commented out in this version of whatwg-fetch.d.ts, but is a dependency in DefinitelyTyped.
The changes in this version of whatwg-fetch as opposed to the "official" on DefinitelyTyped is that the es6-promise reference is removed and that BufferSource and URLSearchParams is added.
Somehow my fetch requests are sometimes being sent to incorrect hostnames:
1) localhost:3000/api/method //correct
2) localhost:3000/dashboard/api/method //incorrect
I have tried to track when and why this happens but I can't seem to figure it out. How can I ensure that my requests are always sent to window.location.host + httpClient.baseUrl + 'path/to/endpoint/ when I call httpClient.fetch('path/to/endpoint', params)?
body
property is lost in request
parameter when responseError interceptor fires.
bodyUsed
property is true - in case of POST, PUT etc request. Request resending is impossible.
.withInterceptor({
responseError: (response, request) => {
switch (response.status) {
case 401:
return Container.instance.get(Login).login()
.then(()=>this.httpClient.fetch(request));
////////////////
I'm submitting a bug report
Please tell us about your environment:
Current behavior:
When I start to compile I got a bunch of errors:
/srv/http/aurelia/node_modules/aurelia-fetch-client/dist/aurelia-fetch-client.d.ts(17,23): error TS2304: Cannot find name 'Request'.
[19:21:33] gulp-notify: [Error running Gulp] Error: /srv/http/aurelia/node_modules/aurelia-fetch-client/dist/aurelia-fetch-client.d.ts(17,23): error TS2304: Cannot find name 'Request'.
/srv/http/aurelia/node_modules/aurelia-fetch-client/dist/aurelia-fetch-client.d.ts(17,35): error TS2304: Cannot find name 'Request'.
[19:21:33] gulp-notify: [Error running Gulp] Error: /srv/http/aurelia/node_modules/aurelia-fetch-client/dist/aurelia-fetch-client.d.ts(17,35): error TS2304: Cannot find name 'Request'.
/srv/http/aurelia/node_modules/aurelia-fetch-client/dist/aurelia-fetch-client.d.ts(17,45): error TS2304: Cannot find name 'Response'.
[19:21:33] gulp-notify: [Error running Gulp] Error: /srv/http/aurelia/node_modules/aurelia-fetch-client/dist/aurelia-fetch-client.d.ts(17,45): error TS2304: Cannot find name 'Response'.
/srv/http/aurelia/node_modules/aurelia-fetch-client/dist/aurelia-fetch-client.d.ts(17,64): error TS2304: Cannot find name 'Request'.
[19:21:33] gulp-notify: [Error running Gulp] Error: /srv/http/aurelia/node_modules/aurelia-fetch-client/dist/aurelia-fetch-client.d.ts(17,64): error TS2304: Cannot find name 'Request'.
/srv/http/aurelia/node_modules/aurelia-fetch-client/dist/aurelia-fetch-client.d.ts(17,74): error TS2304: Cannot find name 'Response'.
[19:21:33] gulp-notify: [Error running Gulp] Error: /srv/http/aurelia/node_modules/aurelia-fetch-client/dist/aurelia-fetch-client.d.ts(17,74): error TS2304: Cannot find name 'Response'.
/srv/http/aurelia/node_modules/aurelia-fetch-client/dist/aurelia-fetch-client.d.ts(27,34): error TS2304: Cannot find name 'Request'.
[19:21:33] gulp-notify: [Error running Gulp] Error: /srv/http/aurelia/node_modules/aurelia-fetch-client/dist/aurelia-fetch-client.d.ts(27,34): error TS2304: Cannot find name 'Request'.
/srv/http/aurelia/node_modules/aurelia-fetch-client/dist/aurelia-fetch-client.d.ts(27,44): error TS2304: Cannot find name 'Response'.
[19:21:33] gulp-notify: [Error running Gulp] Error: /srv/http/aurelia/node_modules/aurelia-fetch-client/dist/aurelia-fetch-client.d.ts(27,44): error TS2304: Cannot find name 'Response'.
/srv/http/aurelia/node_modules/aurelia-fetch-client/dist/aurelia-fetch-client.d.ts(27,63): error TS2304: Cannot find name 'Request'.
[19:21:33] gulp-notify: [Error running Gulp] Error: /srv/http/aurelia/node_modules/aurelia-fetch-client/dist/aurelia-fetch-client.d.ts(27,63): error TS2304: Cannot find name 'Request'.
/srv/http/aurelia/node_modules/aurelia-fetch-client/dist/aurelia-fetch-client.d.ts(27,73): error TS2304: Cannot find name 'Response'.
[19:21:33] gulp-notify: [Error running Gulp] Error: /srv/http/aurelia/node_modules/aurelia-fetch-client/dist/aurelia-fetch-client.d.ts(27,73): error TS2304: Cannot find name 'Response'.
/srv/http/aurelia/node_modules/aurelia-fetch-client/dist/aurelia-fetch-client.d.ts(36,25): error TS2304: Cannot find name 'Response'.
[19:21:33] gulp-notify: [Error running Gulp] Error: /srv/http/aurelia/node_modules/aurelia-fetch-client/dist/aurelia-fetch-client.d.ts(36,25): error TS2304: Cannot find name 'Response'.
/srv/http/aurelia/node_modules/aurelia-fetch-client/dist/aurelia-fetch-client.d.ts(36,45): error TS2304: Cannot find name 'Request'.
[19:21:33] gulp-notify: [Error running Gulp] Error: /srv/http/aurelia/node_modules/aurelia-fetch-client/dist/aurelia-fetch-client.d.ts(36,45): error TS2304: Cannot find name 'Request'.
/srv/http/aurelia/node_modules/aurelia-fetch-client/dist/aurelia-fetch-client.d.ts(36,57): error TS2304: Cannot find name 'Response'.
[19:21:33] gulp-notify: [Error running Gulp] Error: /srv/http/aurelia/node_modules/aurelia-fetch-client/dist/aurelia-fetch-client.d.ts(36,57): error TS2304: Cannot find name 'Response'.
/srv/http/aurelia/node_modules/aurelia-fetch-client/dist/aurelia-fetch-client.d.ts(36,76): error TS2304: Cannot find name 'Response'.
[19:21:33] gulp-notify: [Error running Gulp] Error: /srv/http/aurelia/node_modules/aurelia-fetch-client/dist/aurelia-fetch-client.d.ts(36,76): error TS2304: Cannot find name 'Response'.
/srv/http/aurelia/node_modules/aurelia-fetch-client/dist/aurelia-fetch-client.d.ts(47,42): error TS2304: Cannot find name 'Request'.
[19:21:33] gulp-notify: [Error running Gulp] Error: /srv/http/aurelia/node_modules/aurelia-fetch-client/dist/aurelia-fetch-client.d.ts(47,42): error TS2304: Cannot find name 'Request'.
/srv/http/aurelia/node_modules/aurelia-fetch-client/dist/aurelia-fetch-client.d.ts(47,54): error TS2304: Cannot find name 'Response'.
[19:21:33] gulp-notify: [Error running Gulp] Error: /srv/http/aurelia/node_modules/aurelia-fetch-client/dist/aurelia-fetch-client.d.ts(47,54): error TS2304: Cannot find name 'Response'.
/srv/http/aurelia/node_modules/aurelia-fetch-client/dist/aurelia-fetch-client.d.ts(47,73): error TS2304: Cannot find name 'Response'.
[19:21:33] gulp-notify: [Error running Gulp] Error: /srv/http/aurelia/node_modules/aurelia-fetch-client/dist/aurelia-fetch-client.d.ts(47,73): error TS2304: Cannot find name 'Response'.
/srv/http/aurelia/node_modules/aurelia-fetch-client/dist/aurelia-fetch-client.d.ts(68,13): error TS2304: Cannot find name 'Headers'.
[19:21:33] gulp-notify: [Error running Gulp] Error: /srv/http/aurelia/node_modules/aurelia-fetch-client/dist/aurelia-fetch-client.d.ts(68,13): error TS2304: Cannot find name 'Headers'.
/srv/http/aurelia/node_modules/aurelia-fetch-client/dist/aurelia-fetch-client.d.ts(73,43): error TS2304: Cannot find name 'URLSearchParams'.
[19:21:33] gulp-notify: [Error running Gulp] Error: /srv/http/aurelia/node_modules/aurelia-fetch-client/dist/aurelia-fetch-client.d.ts(73,43): error TS2304: Cannot find name 'URLSearchParams'.
/srv/http/aurelia/node_modules/aurelia-fetch-client/dist/aurelia-fetch-client.d.ts(258,16): error TS2304: Cannot find name 'Request'.
[19:21:33] gulp-notify: [Error running Gulp] Error: /srv/http/aurelia/node_modules/aurelia-fetch-client/dist/aurelia-fetch-client.d.ts(258,16): error TS2304: Cannot find name 'Request'.
/srv/http/aurelia/node_modules/aurelia-fetch-client/dist/aurelia-fetch-client.d.ts(258,63): error TS2304: Cannot find name 'Response'.
[19:21:33] gulp-notify: [Error running Gulp] Error: /srv/http/aurelia/node_modules/aurelia-fetch-client/dist/aurelia-fetch-client.d.ts(258,63): error TS2304: Cannot find name 'Response'.
I solved most of these errors by installing typings with typings i dt~whatwg-fetch -GS
however one error remained:
/srv/http/aurelia/node_modules/aurelia-fetch-client/dist/aurelia-fetch-client.d.ts(73,43): error TS2304: Cannot find name 'URLSearchParams'.
[19:37:46] gulp-notify: [Error running Gulp] Error: /srv/http/aurelia/node_modules/aurelia-fetch-client/dist/aurelia-fetch-client.d.ts(73,43): error TS2304: Cannot find name 'URLSearchParams'.
What is the expected behavior?
Gulp should not trow an error.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.