javascript - Promise fetch returning Promise<void | T> instead of expected object - Stack Overflow

admin管理员组

文章数量:1313808

I am doing a simple fetch using Typescript in a Class, which should return a promise, then I want to get the JSON response from this fetch. However, no matter what change I make, the function is always returning a Promise<void | T> which is ruining the type checking in my code.

export class ApiHelper {
    constructor() {     }

    public FetchFromPortal<T>(xyz: string) {

    ------ Other less relevant code -----------

        return fetch(url, options)
            .then((response) => this.CheckStatus(response))
            .then((response) => this.ParseJSON<T>(response))
            .then((response) => { 
                console.log(response);
                return response;
            })
            .catch((error: Error) => { console.log(error) });
    }

    private CheckStatus(response : Response) : Promise<Response> {
        if (response.status >= 200 && response.status < 300) {
            return Promise.resolve(response);
        } else {
            let error = new Error(response.statusText);
            throw error;
        }
    }

    private ParseJSON<T>(response : Response) {
        return response.json() as Promise<T>;
    }
}

I'm then subsequently calling it like this:

let result = apiHelper.FetchFromPortal<T>(xyz);

According to Typescript, this is returning a Promise<void | T>. I've tried resolving the promise in the call like so:

let result = apiHelper.FetchFromPortal<T>(xyz).then(data => { return data });

Which should in theory resolve the Promise but this doesn't appear to be working.

Any reason why the promise isn't resolving to just the object?

I am doing a simple fetch using Typescript in a Class, which should return a promise, then I want to get the JSON response from this fetch. However, no matter what change I make, the function is always returning a Promise<void | T> which is ruining the type checking in my code.

export class ApiHelper {
    constructor() {     }

    public FetchFromPortal<T>(xyz: string) {

    ------ Other less relevant code -----------

        return fetch(url, options)
            .then((response) => this.CheckStatus(response))
            .then((response) => this.ParseJSON<T>(response))
            .then((response) => { 
                console.log(response);
                return response;
            })
            .catch((error: Error) => { console.log(error) });
    }

    private CheckStatus(response : Response) : Promise<Response> {
        if (response.status >= 200 && response.status < 300) {
            return Promise.resolve(response);
        } else {
            let error = new Error(response.statusText);
            throw error;
        }
    }

    private ParseJSON<T>(response : Response) {
        return response.json() as Promise<T>;
    }
}

I'm then subsequently calling it like this:

let result = apiHelper.FetchFromPortal<T>(xyz);

According to Typescript, this is returning a Promise<void | T>. I've tried resolving the promise in the call like so:

let result = apiHelper.FetchFromPortal<T>(xyz).then(data => { return data });

Which should in theory resolve the Promise but this doesn't appear to be working.

Any reason why the promise isn't resolving to just the object?

• javascript
• typescript
• promise

Share Improve this question Follow edited May 24, 2018 at 3:41 Dandy asked May 24, 2018 at 3:36 DandyDandy 1,4811717 silver badges3131 bronze badges 8

• "it's clearly the request object." --- it's impossible. Are you not confusing it with console.log(response);? – zerkms Commented May 24, 2018 at 3:38
• @zerkms It actually is. I had a rogue console.log and because of the asyncronous request I was misreading the order. It is a Pending Promise state at that point. I'll update my original question. – Dandy Commented May 24, 2018 at 3:40
• "but this doesn't appear to be working." --- what does this exactly mean? You cannot escape a promise. Once you're inside - you're doomed on using only a promise object. – zerkms Commented May 24, 2018 at 3:42
• @zerkms I'm not trying to escape it. I'm trying to resolve the promise and return the json object from the fetch. At the moment, no matter what I do, the Promise is always in a pending state. – Dandy Commented May 24, 2018 at 3:47
• 1 The void in Promise<void | T> es from your catch. If an error occurs, your code swallows it, effecting the void. That is, if there is an error, there is no resolved T value. – cartant Commented May 24, 2018 at 3:59

 |  Show 3 more ments

2 Answers 2

Sorted by: Reset to default 7

Any reason why the promise isn't resolving to just the object?

Here is the reason:

        })
        .catch((error: Error) => { console.log(error) });

When exception happens, this handler logs error to console and does not return anything. The piler sees this and adds void union member to the return type.

Any reason why the promise isn't resolving to just the object?

Yes, promise resolution happens on some kind of "asynchronous space", the call will always just return a promise. The result of the promise is just forwarded through the then() chain and never returned to the caller (because they are asynchronous).

But I think you can have the behavior you are expecting by using await:

let result = await apiHelper.FetchFromPortal<T>(xyz);

本文标签： javascriptPromise fetch returning PromiseltvoidTgt instead of expected objectStack Overflow