Aurelia Fetch Client中的“未处理的拒绝”错误

Question

I use Aurelia Fetch Client library to fetch JSON data from the backend server by the code:

getData() {
    let httpClient = new HttpClient();

    return httpClient.fetch('http://localhost:9220/get-data')
        .then(response => response.json())
        .then(data => return data);
    }
}

And the metod getData() is called from the another code by the code:

dataService.getData().then(data => {
    this.data = data;
}).catch(error => {
    this.backendError = true;
});

As you can see I use here a catch statement and in case of error it's called, but I also see in the console an error message that comes from the library: " vendor-bundle.js:1395 Unhandled rejection TypeError: Failed to fetch ". How can I get rid it?

Answer 1

I'm unsure if this is a bug with the Aurelia HTTP Fetch Client, but adding a responseError interceptor should remove the Unhandled Exception warning in the console.

let http = new HttpClient();

http.configure(config => {
    config.withInterceptor({
        response(response) {
            return response;
        },
        responseError(error) {
            return error;
        }
    })
});

Answer 2

This error may also come from the UseDeveloperExceptionPage middleware in a .NET Core API. This middleware strips all headers from the response which create CORS issues and causes the "TypeError: Failed to fetch" error you saw. Here is an example of my solution, which is described in full here .

.NET Core Middleware

private static Task HandleExceptionAsync(HttpContext context, Exception exception)
{
    var code = HttpStatusCode.InternalServerError;

    var result = JsonConvert.SerializeObject(new { error = "An internal server error has occurred." });
    context.Response.ContentType = "application/json";
    context.Response.StatusCode = (int)code;
    return context.Response.WriteAsync(result);
}

Aurelia Interceptor

responseError(response: any): Promise<Response> {
    if (response instanceof Response) {
        return response.json().then((serverError: ServerError) => {

             // Do something with the error here.

             return Promise.reject<Response>(serverError.error);
        }); 
    }
}