使用Typescript的http Post请求

我试图在Typescript中找到HTTP post请求的示例，但只能找到使用Angular的示例。有人能告诉我找到这个的正确方向吗？或者在这里发布一个使用post和JSON数据获取JSON响应的快速示例。

发送表单数据

Save(model: yourmodalarray[]): Observable<any> {

        var formData: FormData = new FormData();

        formData.append('id', '');
 const headers = new Headers({
            'Accept': 'application/json',
            'enctype': 'multipart/form-data'
        });
        const options = new RequestOptions({ headers: headers });


        return this._http
            .post(this._baseUrl + 'Save', formData, options)
            .map(res => <any>res.json())
            .catch(this.handleError);

    }

Save（型号：yourmodalarray[]）：可观察{
var formData:formData=new formData（）；
formData.append（'id'，''）；
const headers=新的头({
“接受”：“应用程序/json”，
“enctype”：“多部分/表单数据”
});
const options=newrequestoptions（{headers:headers}）；
返回此。\u http
.post（此._baseUrl+“保存”、表单数据、选项）
.map（res=>res.json（））
.接住（这个.把手错误）；
}

2020年更新： 请注意，到目前为止，全局

fetch

是。如果您需要IE支持，请阅读原始答案

|

如果该功能在

窗口

或

全局

上下文中可用，则如下所示：

    fetch(input: RequestInfo, init?: RequestInit): Promise<Response>;

fetch（输入：RequestInfo，init？：RequestInit）：Promise；

因此，您可以：

const response = await fetch(myUrl, {
  method: 'POST',
  body: content,
  headers: {'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'} });

if (!response.ok) { /* Handle */ }

// If you care about a response:
if (response.body !== null) {
  // body is ReadableStream<Uint8Array>
  // parse as needed, e.g. reading directly, or
  const asString = new TextDecoder("utf-8").decode(response.body);
  // and further:
  const asJSON = JSON.parse(asString);  // implicitly 'any', make sure to verify type on runtime.
}

const response=wait fetch（myUrl{
方法：“POST”，
正文:内容,，
标题：{'Content-Type'：'application/x-www-form-urlencoded；charset=UTF-8'}）；
如果（！response.ok）{/*句柄*/}
//如果您关心回复：
if（response.body！==null）{
//正文是可读的
//根据需要进行解析，例如直接读取，或
const asString=新的文本解码器（“utf-8”）.decode（response.body）；
//此外：
const asJSON=JSON.parse（asString）；//隐式“any”，确保在运行时验证类型。
}

原始答复： 如果您想在TypeScript中为HTTP POST请求使用本机JavaScript函数，请查看YouMightNotNeedJQuery.com上的和示例。使用它，您可以实现自己的：

// Using callbacks:
function request<Request, Response>(
        method: 'GET' | 'POST',
        url: string,
        content?: Request,
        callback?: (response: Response) => void,
        errorCallback?: (err: any) => void) {

    const request = new XMLHttpRequest();
    request.open(method, url, true);
    request.onload = function () {
        if (this.status >= 200 && this.status < 400) {
            // Success!
            const data = JSON.parse(this.response) as Response;
            callback && callback(data);
        } else {
            // We reached our target server, but it returned an error
        }
    };

    request.onerror = function (err) {
        // There was a connection error of some sort
        errorCallback && errorCallback(err);
    };
    if (method === 'POST') {
        request.setRequestHeader(
            'Content-Type',
            'application/x-www-form-urlencoded; charset=UTF-8');
    }
    request.send(content);
}

// Using promises:
function request2<Request, Response>(
    method: 'GET' | 'POST',
    url: string,
    content?: Request
): Promise<Response> {
    return new Promise<Response>((resolve, reject) => {
        request(method, url, content, resolve, reject);
    });
}

//使用回调：
功能请求(
方法：“获取”|“发布”，
url:string，
内容？：请求，
回调？：（响应：响应）=>void，
errorCallback？：（错误：任意）=>void）{
const request=new XMLHttpRequest（）；
打开（方法、url、true）；
request.onload=函数（）{
如果（this.status>=200&&this.status<400）{
//成功！
const data=JSON.parse（this.response）作为响应；
回调&回调（数据）；
}否则{
//我们到达了目标服务器，但它返回了一个错误
}
};
request.onerror=函数（err）{
//出现了某种连接错误
errorCallback&&errorCallback（err）；
};
如果（方法=='POST'）{
request.setRequestHeader(
“内容类型”，
“application/x-www-form-urlencoded；charset=UTF-8”）；
}
请求。发送（内容）；
}
//使用承诺：
功能请求2(
方法：“获取”|“发布”，
url:string，
内容？：请求
)：承诺{
返回新承诺（（解决、拒绝）=>{
请求（方法、url、内容、解析、拒绝）；
});
}

---

XMLHttpRequest

是一个内置的JavaScript类，包含在TypeScript键入中。

下面是我的一个非常简单的示例，仅使用TypeScript调用GET或POST

//-------------------------------------------------
// Simple function to GET or POST
function httpCall(method: string, url:string, data:any, callback:(result:any)=>any) {
    var xhr = new XMLHttpRequest();
    xhr.open(method, url, true);
    if (callback) xhr.onload = function() { callback(JSON.parse(this['responseText'])); };
    if (data != null) {
        xhr.setRequestHeader('Content-Type', 'application/json');
        xhr.send(JSON.stringify(data));
    }
    else xhr.send();
}

---

可选输入数据（post正文）和回调。数据和结果都被假定为JSON。

这个例子似乎也使用Angular的HttpClient——作者要求使用其他方法。不是native typescriptI在发送之前也添加了这个。

for（let header of headers）{request.setRequestHeader（header.key，header.value）；}

然后向request

headers:Array添加了一个参数，