使用Typescript时,如何使用$ http定义回调?

Sam*_*tar 8 angularjs typescript

我的$ http调用看起来像这样,我想知道最灵活的方法来处理.success和.error中返回的所有参数?

this.$http({ url: "/api/x, method: "GET" })
   .success((??) : void => {

   })
   .error((??) : void => {

   })
Run Code Online (Sandbox Code Playgroud)

Angular文档告诉我返回以下内容:

data – {string|Object} – The response body transformed with the transform functions.
status – {number} – HTTP status code of the response.
headers – {function([headerName])} – Header getter function.
config – {Object} – The configuration object that was used to generate the request.
statusText – {string} – HTTP status text of the response.
Run Code Online (Sandbox Code Playgroud)

angular.d.ts告诉我:

interface IHttpPromiseCallback<T> {
        (data: T, status: number, headers: (headerName: string) => string, config: IRequestConfig): void;
    }

    interface IHttpPromiseCallbackArg<T> {
        data?: T;
        status?: number;
        headers?: (headerName: string) => string;
        config?: IRequestConfig;
        statusText?: string;
    }
Run Code Online (Sandbox Code Playgroud)

但我仍然感到困惑.有没有人使用上面的两个接口来定义回调,他们是如何做到的?

理想情况下,我希望有这样的东西:

 .success((data: any, status: number, headers: (headerName: string) => string, config: any) : void => {
Run Code Online (Sandbox Code Playgroud)

但是使用接口.

任何人都可以告诉我,如果我在正确的轨道上,如果我可以使用接口,而不是必须在参数后指定:any:number等.

Ada*_*her 6

我意识到这是一个非常古老的帖子,但我不认为这里的答案是充分的(即使回顾时,当问到这个问题时).

状态始终是一个数字,所以不要担心该参数.

您可能正在寻找一种以强类型方式处理响应的方法.

第一个属性data可能是您关注的主要属性.在您的时间,.success/.error arg将被定义为:

this.$http({ url: "/api/x, method: "GET" })
   .success((response: IHttpPromiseCallbackArg<IMyInterface>) : void => {
        console.log("Hello "+ response.data.firstName);
   })
   .error((response: IHttpPromiseCallbackArg<IMyInterface>) : void => {

   })
Run Code Online (Sandbox Code Playgroud)

在将来,.success和.error将被弃用,$ http应该更像标准的承诺:

this.$http({ url: "/api/x, method: "GET" })
    .then((response: IHttpPromiseCallbackArg<IMyInterface>) => {
        console.log("Hello "+ response.data.firstName);
    }, (response: IHttpPromiseCallbackArg<IMyInterface>) => {
        console.log("Boo, error code "+ response.status);
    });
Run Code Online (Sandbox Code Playgroud)

这些都假设您拥有来自您的Web服务的数据符合以下条件:

export interface IMyInterface {
    firstName: string
}
Run Code Online (Sandbox Code Playgroud)

更新12/4/2017

哇,这是我未来的更进一步!现在IHttpPromiseCallbackArg已弃用.未来的事情确实很复杂.我多么渴望更简单的时间.

(J/K现在实际上更容易.)

而不是IHttpPromiseCallbackArg<>,使用:IHttpResponse<>.看起来界面签名大部分(完全?)相同,并且是替代品.

this.$http({ url: "/api/x, method: "GET" })
    .then((response: IHttpResponse<IMyInterface>) => {
        console.log("Hello "+ response.data.firstName);
    }, (response: IHttpResponse<IMyInterface>) => {
        console.log("Boo, error code "+ response.status);
    });
Run Code Online (Sandbox Code Playgroud)


Ami*_*ich 3

以下是 GET 的示例:

  private getInternal<T>(url) {
        var deferred = this.$q.defer();

        this.$http({ url: url, method: "GET" })
            .success((data: T, status: number, headers: (headerName: string) => string, config: ng.IRequestConfig): void => {
                if (status == 200 && headers('location') == null && config.timeout > 200) {
                    //do something with data
                }

                return deferred.resolve(data);
            })
            .error((data: T, status: number, headers: (headerName: string) => string, config: ng.IRequestConfig): void => {
                if (status == 500 && headers('myAuth') != null && config.method == 'GET') {
                    // write to log
                }

                return deferred.reject(data);
            });
    }
Run Code Online (Sandbox Code Playgroud)

现在假设您有一项服务并且您知道您正在获取一个特定对象:

this.getInternal<mySpecObject>('service/abc').then(res => doSomethingWithData(res));
Run Code Online (Sandbox Code Playgroud)