Question

我正在为我的朋友开发一个小的打字稿http库来简化http请求。我希望我的朋友能够使用我创建的post()对象中的方法Http发送异步POST请求。

我想在Angular 2中完成与subscribe()方法类似的操作。我的意思是我想创建一个函数，它将负责回调（3种类型 - 成功，错误，完成）我会在我的Http的post（）方法中使用它。这就是我现在所拥有的。

基本上这是书面的想法：

的Http：

import { IHeader } from 'interfaces';
import { SubscribeAble } from 'subscribeAble';

class Http {
    http: XMLHttpRequest;

    constructor() {
        this.http = new XMLHttpRequest;
    }

    post(url: string, data: Object, headers?: Array<IHeader>) {
        this.http.open('POST', url);

        if(headers) {
            for(let header of headers) {
                this.http.setRequestHeader(header.name, header.value);
            }
        }

        this.http.send(JSON.stringify(data));

        return new SubscribeAble(this.http);
    }
}

SubscribeAble：

export class Subscribe {
    http: XMLHttpRequest;

    constructor(http) {
        this.http = http;
    }

    subscribe(success: (success) => void, error?: (error) => void, complete?: () => void) {
        this.http.onload = success;
        if(error) { this.http.onerror = error; }
        if(complete) { this.http.onreadystatechange = complete; }
    }
}

我现在需要的是如何将数据注入到subscribe()方法中的函数......更简单一点：我希望'success'变量在函数中具有this.http.response值{ {1}}。提前谢谢。

Answer 1

我终于想出了如何修复subscribe方法。我用回调来实现我想要的。这是代码：

subscribe(success: (success) => void, error?: (error) => void, complete?: () => void) {
    let callback = (cb: (res) => void) {
        return callback(this.http.response);
    }

    this.http.onload = () => {
        return callback(success);
    }
    if(error) { 
        this.http.onerror = () => {
            return callback(error);
        }
    }
    if(complete) { this.http.onloadend = complete; }
}

Answer 2

我认为你可以这样做：

subscribe(success: (success) => void, error?: (error) => void, complete?: () => void) {
   this.success = success;
   this.error = error;
   this.complete = complete;

   this.http.onload = this.onload;
   if(error) { this.http.onerror = this.onerror; }
   if(complete) { this.http.onreadystatechange = this.oncomplete; }
}

onload() {
   if (this.http.status === 200) {
      this.success(this.response);
   } else {
      if (this.error)
        this.error(this.http.statusText);
      }
   }
}

您将用户发送给您的函数设置为类变量，并使用您要发送的数据作为参数调用它们。

您可以为其他2个功能

创建onerror和oncomplete方法

自定义XHR回调处理程序

2 个答案: