使用 Fetch 和 Promise 的 Angular 2 服务

Question

我正在运行 Angular 2 测试版。

我正在尝试使用实现承诺的 fetch 创建一个 http 服务。到目前为止，这是我所拥有的：

HttpService.ts：

@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) => {
           this.response = response;

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

           return error.message;
        });
    }
}

这是服务消费类：

export class ConsumingComponent {
    constructor(private _httpService: HTTPService) {
               ...
    }

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

        this.sampleStuffModel = this.response;
    }
}

我打算异步调用 Web 服务。
这就是我对技术的理解：

• 在服务中初始化一个 Promise
• 将服务注入消费类
• 在消费类中添加一个“.then(...)”。回调结果在这里。

我试图为响应（“response”）设置一个类成员（“this.response”）。

当我运行这个 Promise 时，响应为 null 或未定义。

我猜测 resolve 函数的实现是问题的根源。我是否将整个 window.fetch() 包装在一个 resolve() 中？

Answer 1

使用 Promise 时，返回的值不会在整个链中冒泡。

window.fetch(...)
  .then(status) // only status function will have the response
  .then(json)

也许我错了，但 status 和 json 似乎不是函数。你想在这里做什么？

您的服务代码没有按预期恢复工作（我还删除了status 和json）：

@Injectable()
export class HTTPService {
    save(url: string, jsonPayload: JsonPayload): any {
        // if you don't return anything, how the consumer will know it's a promise?
        return window.fetch(url, {
            method: "POST",
            headers: {
                "Accept": "application/json",
                "Content-Type": "application/json"
            },
            body: jsonPayload
        })
        // do you really need to store the response into the service?
        // .then((response: any) => {
        //    this.response = response;
        //    return Promise.resolve(this.response);
        // })
        .catch((error) => {
            console.log(error.message);
            // if you return error.message here, the consumer won't know there is a problem
            // you need to rethrow the error so it can be catched by the consumer
            throw error;
        });
    }
}

windows.fetch() 已经是一个承诺，不要将其包装在 resolve() 中。