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

时间:2014-08-24 11:36:11

标签: angularjs typescript

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

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

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

   })

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.

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;
    }

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

理想情况下,我想要这样的事情:

 .success((data: any, status: number, headers: (headerName: string) => string, config: any) : void => {

但是使用接口。

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

3 个答案:

答案 0 :(得分: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 => {

   })

将来,.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);
    });

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

export interface IMyInterface {
    firstName: string
}

更新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);
    });

答案 1 :(得分: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);
            });
    }

现在让我们说你有服务而且你知道你得到一个特定的对象:

this.getInternal<mySpecObject>('service/abc').then(res => doSomethingWithData(res));

答案 2 :(得分:3)

这就是我做的事情

module portal.services {


export class apiService {


    public getData<T>(url?:string): ng.IPromise<T> {

        var def = this.$q.defer();
        this.$http.get(this.config.apiBaseUrl + url).then((successResponse) => {

            if(successResponse)
                def.resolve(successResponse.data);
            else
                def.reject('server error');

        }, (errorRes) => {

            def.reject(errorRes.statusText);
        });

        return def.promise;
    }

    public postData<T>(formData: any, url?:string,contentType?:string): ng.IPromise<T>{

        var def = this.$q.defer();

        this.$http({
            url: this.config.apiBaseUrl + url,
            method: 'POST',
            data:formData,
            withCredentials: true,
            headers: {
                'Content-Type':contentType || 'application/json'
            }
        }).then((successResponse)=>{
            def.resolve(successResponse.data);
        },(errorRes)=>{
            def.reject(errorRes);
        });

        return def.promise;

    }

    static $inject = ['$q','$http', 'config'];

    constructor(public $q:ng.IQService,public $http:ng.IHttpService, public config:interfaces.IPortalConfig) {


    }

}

}