|
| 1 | +/** |
| 2 | + * @license |
| 3 | + * Copyright Google LLC All Rights Reserved. |
| 4 | + * |
| 5 | + * Use of this source code is governed by an MIT-style license that can be |
| 6 | + * found in the LICENSE file at https://angular.io/license |
| 7 | + */ |
| 8 | + |
| 9 | +import {inject, Injectable} from '@angular/core'; |
| 10 | +import {Observable, Observer} from 'rxjs'; |
| 11 | + |
| 12 | +import {HttpBackend} from './backend'; |
| 13 | +import {HttpHeaders} from './headers'; |
| 14 | +import {HttpRequest} from './request'; |
| 15 | +import {HttpDownloadProgressEvent, HttpErrorResponse, HttpEvent, HttpEventType, HttpHeaderResponse, HttpResponse, HttpStatusCode} from './response'; |
| 16 | + |
| 17 | +const XSSI_PREFIX = /^\)\]\}',?\n/; |
| 18 | + |
| 19 | +const REQUEST_URL_HEADER = `X-Request-URL`; |
| 20 | + |
| 21 | +/** |
| 22 | + * Determine an appropriate URL for the response, by checking either |
| 23 | + * response url or the X-Request-URL header. |
| 24 | + */ |
| 25 | +function getResponseUrl(response: Response): string|null { |
| 26 | + if (response.url) { |
| 27 | + return response.url; |
| 28 | + } |
| 29 | + // stored as lowercase in the map |
| 30 | + const xRequestUrl = REQUEST_URL_HEADER.toLocaleLowerCase(); |
| 31 | + return response.headers.get(xRequestUrl); |
| 32 | +} |
| 33 | + |
| 34 | +/** |
| 35 | + * Uses `fetch` to send requests to a backend server. |
| 36 | + * |
| 37 | + * This `FetchBackend` requires the support of the |
| 38 | + * [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) which is available on all |
| 39 | + * supported browsers and on Node.js v18 or later. |
| 40 | + * |
| 41 | + * @see {@link HttpHandler} |
| 42 | + * |
| 43 | + * @publicApi |
| 44 | + * @developerPreview |
| 45 | + */ |
| 46 | +@Injectable() |
| 47 | +export class FetchBackend implements HttpBackend { |
| 48 | + // We need to bind the native fetch to its context or it will throw an "illegal invocation" |
| 49 | + private readonly fetchImpl = |
| 50 | + inject(FetchFactory, {optional: true})?.fetch ?? fetch.bind(globalThis); |
| 51 | + |
| 52 | + handle(request: HttpRequest<any>): Observable<HttpEvent<any>> { |
| 53 | + return new Observable(observer => { |
| 54 | + const aborter = new AbortController(); |
| 55 | + this.doRequest(request, aborter.signal, observer) |
| 56 | + .then(noop, error => observer.error(new HttpErrorResponse({error}))); |
| 57 | + return () => aborter.abort(); |
| 58 | + }); |
| 59 | + } |
| 60 | + |
| 61 | + private async doRequest( |
| 62 | + request: HttpRequest<any>, signal: AbortSignal, |
| 63 | + observer: Observer<HttpEvent<any>>): Promise<void> { |
| 64 | + const init = this.createRequestInit(request); |
| 65 | + let response; |
| 66 | + |
| 67 | + try { |
| 68 | + const fetchPromise = this.fetchImpl(request.url, {signal, ...init}); |
| 69 | + |
| 70 | + // Make sure Zone.js doesn't trigger false-positive unhandled promise |
| 71 | + // error in case the Promise is rejected synchronously. See function |
| 72 | + // description for additional information. |
| 73 | + silenceSuperfluousUnhandledPromiseRejection(fetchPromise); |
| 74 | + |
| 75 | + // Send the `Sent` event before awaiting the response. |
| 76 | + observer.next({type: HttpEventType.Sent}); |
| 77 | + |
| 78 | + response = await fetchPromise; |
| 79 | + } catch (error: any) { |
| 80 | + observer.error(new HttpErrorResponse({ |
| 81 | + error, |
| 82 | + status: error.status ?? 0, |
| 83 | + statusText: error.statusText, |
| 84 | + url: request.url, |
| 85 | + headers: error.headers, |
| 86 | + })); |
| 87 | + return; |
| 88 | + } |
| 89 | + |
| 90 | + const headers = new HttpHeaders(response.headers); |
| 91 | + const statusText = response.statusText; |
| 92 | + const url = getResponseUrl(response) ?? request.url; |
| 93 | + |
| 94 | + let status = response.status; |
| 95 | + let body: string|ArrayBuffer|Blob|object|null = null; |
| 96 | + |
| 97 | + if (request.reportProgress) { |
| 98 | + observer.next(new HttpHeaderResponse({headers, status, statusText, url})); |
| 99 | + } |
| 100 | + |
| 101 | + if (response.body) { |
| 102 | + // Read Progress |
| 103 | + const contentLength = response.headers.get('content-length'); |
| 104 | + const chunks: Uint8Array[] = []; |
| 105 | + const reader = response.body.getReader(); |
| 106 | + let receivedLength = 0; |
| 107 | + |
| 108 | + let decoder: TextDecoder; |
| 109 | + let partialText: string|undefined; |
| 110 | + |
| 111 | + while (true) { |
| 112 | + const {done, value} = await reader.read(); |
| 113 | + |
| 114 | + if (done) { |
| 115 | + break; |
| 116 | + } |
| 117 | + |
| 118 | + chunks.push(value); |
| 119 | + receivedLength += value.length; |
| 120 | + |
| 121 | + if (request.reportProgress) { |
| 122 | + partialText = request.responseType === 'text' ? |
| 123 | + (partialText ?? '') + (decoder ??= new TextDecoder).decode(value, {stream: true}) : |
| 124 | + undefined; |
| 125 | + |
| 126 | + observer.next({ |
| 127 | + type: HttpEventType.DownloadProgress, |
| 128 | + total: contentLength ? +contentLength : undefined, |
| 129 | + loaded: receivedLength, |
| 130 | + partialText, |
| 131 | + } as HttpDownloadProgressEvent); |
| 132 | + } |
| 133 | + } |
| 134 | + |
| 135 | + // Combine all chunks. |
| 136 | + const chunksAll = this.concatChunks(chunks, receivedLength); |
| 137 | + try { |
| 138 | + body = this.parseBody(request, chunksAll); |
| 139 | + } catch (error) { |
| 140 | + // Body loading or parsing failed |
| 141 | + observer.error(new HttpErrorResponse({ |
| 142 | + error, |
| 143 | + headers: new HttpHeaders(response.headers), |
| 144 | + status: response.status, |
| 145 | + statusText: response.statusText, |
| 146 | + url: getResponseUrl(response) ?? request.url, |
| 147 | + })); |
| 148 | + return; |
| 149 | + } |
| 150 | + } |
| 151 | + |
| 152 | + // Same behavior as the XhrBackend |
| 153 | + if (status === 0) { |
| 154 | + status = body ? HttpStatusCode.Ok : 0; |
| 155 | + } |
| 156 | + |
| 157 | + // ok determines whether the response will be transmitted on the event or |
| 158 | + // error channel. Unsuccessful status codes (not 2xx) will always be errors, |
| 159 | + // but a successful status code can still result in an error if the user |
| 160 | + // asked for JSON data and the body cannot be parsed as such. |
| 161 | + const ok = status >= 200 && status < 300; |
| 162 | + |
| 163 | + if (ok) { |
| 164 | + observer.next(new HttpResponse({ |
| 165 | + body, |
| 166 | + headers, |
| 167 | + status, |
| 168 | + statusText, |
| 169 | + url, |
| 170 | + })); |
| 171 | + |
| 172 | + // The full body has been received and delivered, no further events |
| 173 | + // are possible. This request is complete. |
| 174 | + observer.complete(); |
| 175 | + } else { |
| 176 | + observer.error(new HttpErrorResponse({ |
| 177 | + error: body, |
| 178 | + headers, |
| 179 | + status, |
| 180 | + statusText, |
| 181 | + url, |
| 182 | + })); |
| 183 | + } |
| 184 | + } |
| 185 | + |
| 186 | + private parseBody(request: HttpRequest<any>, binContent: Uint8Array): string|ArrayBuffer|Blob |
| 187 | + |object|null { |
| 188 | + switch (request.responseType) { |
| 189 | + case 'json': |
| 190 | + // stripping the XSSI when present |
| 191 | + const text = new TextDecoder().decode(binContent).replace(XSSI_PREFIX, ''); |
| 192 | + return text === '' ? null : JSON.parse(text) as object; |
| 193 | + case 'text': |
| 194 | + return new TextDecoder().decode(binContent); |
| 195 | + case 'blob': |
| 196 | + return new Blob([binContent]); |
| 197 | + case 'arraybuffer': |
| 198 | + return binContent.buffer; |
| 199 | + } |
| 200 | + } |
| 201 | + |
| 202 | + private createRequestInit(req: HttpRequest<any>): RequestInit { |
| 203 | + // We could share some of this logic with the XhrBackend |
| 204 | + |
| 205 | + const headers: Record<string, string> = {}; |
| 206 | + const credentials: RequestCredentials|undefined = req.withCredentials ? 'include' : undefined; |
| 207 | + |
| 208 | + // Setting all the requested headers. |
| 209 | + req.headers.forEach((name, values) => (headers[name] = values.join(','))); |
| 210 | + |
| 211 | + // Add an Accept header if one isn't present already. |
| 212 | + headers['Accept'] ??= 'application/json, text/plain, */*'; |
| 213 | + |
| 214 | + // Auto-detect the Content-Type header if one isn't present already. |
| 215 | + if (!headers['Content-Type']) { |
| 216 | + const detectedType = req.detectContentTypeHeader(); |
| 217 | + // Sometimes Content-Type detection fails. |
| 218 | + if (detectedType !== null) { |
| 219 | + headers['Content-Type'] = detectedType; |
| 220 | + } |
| 221 | + } |
| 222 | + |
| 223 | + return { |
| 224 | + body: req.body, |
| 225 | + method: req.method, |
| 226 | + headers, |
| 227 | + credentials, |
| 228 | + }; |
| 229 | + } |
| 230 | + |
| 231 | + private concatChunks(chunks: Uint8Array[], totalLength: number): Uint8Array { |
| 232 | + const chunksAll = new Uint8Array(totalLength); |
| 233 | + let position = 0; |
| 234 | + for (const chunk of chunks) { |
| 235 | + chunksAll.set(chunk, position); |
| 236 | + position += chunk.length; |
| 237 | + } |
| 238 | + |
| 239 | + return chunksAll; |
| 240 | + } |
| 241 | +} |
| 242 | + |
| 243 | +/** |
| 244 | + * Abstract class to provide a mocked implementation of `fetch()` |
| 245 | + */ |
| 246 | +export abstract class FetchFactory { |
| 247 | + abstract fetch: typeof fetch; |
| 248 | +} |
| 249 | + |
| 250 | +function noop(): void {} |
| 251 | + |
| 252 | +/** |
| 253 | + * Zone.js treats a rejected promise that has not yet been awaited |
| 254 | + * as an unhandled error. This function adds a noop `.then` to make |
| 255 | + * sure that Zone.js doesn't throw an error if the Promise is rejected |
| 256 | + * synchronously. |
| 257 | + */ |
| 258 | +function silenceSuperfluousUnhandledPromiseRejection(promise: Promise<unknown>) { |
| 259 | + promise.then(noop, noop); |
| 260 | +} |
0 commit comments