Angular 2 Service using Fetch and Promise
<p>I'm running Angular 2 beta.</p>

<p>I'm trying to create an http service using fetch that implements promises.  Here's what I have so far:</p>

<p>HttpService.ts:</p>

<pre><code>@Injectable()
export class HTTPService {

    save(url: string, jsonPayload: JsonPayload): any {

        window.fetch(url, {
            method: "POST",
            headers: {
                       "Accept": "application/json",
                       "Content-Type": "application/json"
            },
            body: jsonPayload 
        })
        .then(status)
        .then(json)
        .then((response: any) =&gt; {
           this.response = response;

           return Promise.resolve(this.response);
        })
        .catch((error) =&gt; {
           console.log(error.message);

           return error.message;
        });
    }
}
</code></pre>

<p>Here's the service-consuming class:</p>

<pre><code>export class ConsumingComponent {
    constructor(private _httpService: HTTPService) {
               ...
    }

    getSampleStuff() {
        this._httpService
            .save("http:sample.com/sample/stuff", this.jsonPayload)
            .then(response =&gt; this.response = response);

        this.sampleStuffModel = this.response;
    }
}
</code></pre>

<p>My intention to call a web service asynchronously.<br>
This is how I understand the technology:</p>

<ul>
<li>Initialize a Promise in the service</li>
<li>Inject the service into the consuming class</li>
<li>Add a ".then(...)" in the consuming class.  the callback results land here. </li>
</ul>

<p>I tried to set a class member ("this.response") to the response ("response").  </p>

<p>When I run this promise, the response is null or undefined.</p>

<p>I'm guessing that the implementation of the resolve function is the source of the problem.  Do I wrap the entire window.fetch() in a resolve()?</p>