Teal TealUI

异步请求web/ajax

异步从服务端载入数据。

基本用法
跨域问题
跨域头
OPTIONS 请求
登陆信息
API
全局
Ajax 类

基本用法

import ajax from "web/ajax";

ajax({
    type: "GET",
    url: "",
    data: null,
    success(data) {
        console.log(data);
    }
});

跨域问题

浏览器默认限制只能向当前网页相同域名的服务器发送请求。

跨域头

为了支持跨域请求，服务器响应中应包含：

Access-Control-Allow-Origin: *

OPTIONS 请求

如果设置了 contentType 为 application/json，则浏览器首先会发送一个 OPTIONS 请求。 服务器应处理该请求并返回 200 状态码。

登陆信息

只有设置了 withCredentials 为 true 时才会发送 Cookie（包含登陆信息）到服务器。 服务器响应中应包含：

Access-Control-Allow-Origin: tealui.com         # 值应为实际的域名且不能为 *，其值可以从请求头 Origin 获取。
Access-Control-Allow-Methods: OPTIONS,GET,POST  # 值可以从请求头 Access-Control-Request-Method 获取。
Access-Control-Allow-Headers: contentType       # 值可以从请求头 Access-Control-Request-Headers 获取。
Access-Control-Allow-Credentials: true
另参考

API

全局

函数 描述
⮞ ajax(...)(options?:Partial<Ajax>):Ajax

发送一个异步请求。

参数 类型 描述 默认值
options Partial<Ajax> —

返回值

类型：Ajax

返回请求对象。

发送一个异步请求。
⮞ checkStatus(status)(status:number):boolean

判断一个 HTTP 状态码是否表示正确响应。

参数 类型 描述 默认值
status* number —

返回值

类型：boolean

如果正确则返回 true, 否则返回 false 。一般地，2xx、304、1223 被认为是正确的状态吗。

判断一个 HTTP 状态码是否表示正确响应。

Ajax 类

表示一个异步请求。

字段 类型 描述
⮞ type : string = "GET"

请求的类型（方法、谓词）。请求类型应全大写。

 string

请求的类型（方法、谓词）。请求类型应全大写。
⮞ url : string = location.href

请求的地址。可以是相对于当前页面地址的相对地址。

 string

请求的地址。可以是相对于当前页面地址的相对地址。
⮞ data : any

请求的数据。可以是字符串、JSON 对象或 FormData。

 any

请求的数据。可以是字符串、JSON 对象或 FormData。
⮞ contentType : string = "application/x-www-form-urlencoded"

请求数据的 MIME 类型。

 string

请求数据的 MIME 类型。
⮞ headers : { [name: string]: string; }

附加的请求头。

 object

附加的请求头。
⮞ username : string

服务器的用户名。

 string

服务器的用户名。
⮞ password : string

服务器的密码。

 string

服务器的密码。
⮞ withCredentials : boolean

是否发送用户凭证（如 Cookie 登陆信息）。

 boolean

是否发送用户凭证（如 Cookie 登陆信息）。
⮞ responseType : "text" | "json" | "document" | "arraybuffer" | "blob"

响应数据的类型。

说明

其中 "arraybuffer" 和 "blob" 仅支持：CH 31+、FF 12+、IE 10+、OP 18+、SF 7.1+、Android 4.4.1+。

参考

 string

响应数据的类型。
⮞ timeout : number

请求的超时毫秒数。如果小于 0 则不设置超时。

 number

请求的超时毫秒数。如果小于 0 则不设置超时。
⮞ xhr : XMLHttpRequest

获取底层发送请求的对象。

 XMLHttpRequest

获取底层发送请求的对象。
⮞ status : number

获取服务器返回的状态码。如果小于 0 表示请求未发出。

 number

获取服务器返回的状态码。如果小于 0 表示请求未发出。
⮞ response : any

获取服务器响应的数据。数据的类型根据 responseType 决定。

 any

获取服务器响应的数据。数据的类型根据 responseType 决定。
⮞ success : (response: any, sender: Ajax) => void

请求成功的回调函数。

 function

请求成功的回调函数。
⮞ error : (error: string | Error, sender: Ajax) => void

请求失败的回调函数。

 function

请求失败的回调函数。
⮞ complete : (error: string | Error, sender: Ajax) => void

请求完成的回调函数。无论请求是否成功都会执行此回调。

 function

请求完成的回调函数。无论请求是否成功都会执行此回调。
⮞ progress : (data: string | Error | Event, internalError?: number) => void = (data: string | Error | Event | undefined, internalError?: number) => { const xhr = this.xhr; try { // 仅当正在发送请求且请求已完成时继续执行。 if (!this.sending || !internalError && xhr.readyState !== 4) { return; } this.sending = false; // 删除 readystatechange 以避免有些浏览器的内存泄露。 xhr.onreadystatechange = null!; // 处理内置错误。 if (internalError) { this.status = internalError; if (xhr.readyState !== 4) { xhr.abort(); } } else if (checkStatus(this.status = xhr.status)) { try { switch (this.responseType) { case undefined: case "text": this.response = xhr.responseText; break; case "json": this.response = JSON.parse(xhr.responseText); break; case "document": this.response = xhr.responseXML; break; default: this.response = xhr.response; break; } data = undefined; } catch (responseError) { // 解析响应数据报错。 // IE6-9：请求二进制格式的文件报错。 this.status = -6; this.response = undefined; data = responseError; } } else { data = xhr.statusText || "Access denied"; } } catch (firefoxAccessError) { this.progress(firefoxAccessError, -5); return; } // 触发回调。 if (data === undefined) { this.success && this.success(this.response, this); } else { this.error && this.error(data as string | Error, this); } this.complete && this.complete(data as string | Error, this); }

(保护的)处理请求状态改变的回调函数。

 function

(保护的)处理请求状态改变的回调函数。
⮞ sending : boolean

判断是否正在发送请求。

 boolean

判断是否正在发送请求。
方法 描述
⮞ getResponseHeader(name)(name:string):string

获取响应头。

参数 类型 描述 默认值
name* string —

返回值

类型：string

返回响应头数据。如果响应头不存在则返回 null。

获取响应头。
⮞ send()():boolean

发送请求。

返回值

类型：boolean

如果请求发送成功则返回 true，否则返回 false。

发送请求。
⮞ abort()():void

终止当前请求。

返回值

类型：void

终止当前请求。