request


网络请求工具类,可以实现比较常见的一些请求操作。

get

function get(url: string, options?: RequestOptions): Promise<Response>

url: string

url 地址

options?: RequestOptions

请求的配置参数,结构为

interface RequestOptions {
    method?: string;
    accept?: string;
    contentType?: string;
    customerHeaders?: { [key: string]: string };
    signal?: AbortSignal | null;
    progress?: (this: XMLHttpRequestUpload, ev: ProgressEvent<XMLHttpRequestEventTarget>) => any
}

method?: string

请求类型,默认为 GET 或 POST

accept?: string

Accept 请求头的值

contentType?: string

Content-Type 请求头的值

customerHeaders?: { [key: string]: string }

自定义请求头,例如

{
    'X-Auth-Id': 'xxxxxx',
    'X-Auth-Token': 'xxxxxx'
}

signal?: AbortSignal | null

终止器的信号,用来控制终止请求任务

progress?: (this: XMLHttpRequestUpload, ev: ProgressEvent<XMLHttpRequestEventTarget>) => any

调用 upload 方法时在上传过程中触发的事件,返回进度参数

return: Promise<Response>

返回一个结果为 Response 对象的 Promise

post

function post(url: string, data?: BodyInit | null, options?: RequestOptions): Promise<Response>

url: string

url 地址

data?: BodyInit | null

post 请求传递的请求正文,可以是 FormData 或者任意对象,后者会经 JSON 序列化后发送

options?: RequestOptions

请求的配置参数,结构如上述 get

return: Promise<Response>

返回一个结果为 Response 对象的 Promise

upload

upload(url: string, data: FormData, options?: RequestOptions): Promise<XMLHttpRequest>

url: string

url 地址

data: FormData

upload 请求传递的请求正文,仅支持 FormData

options?: RequestOptions

请求的配置参数,结构如上述 get,仅使用其中 progresscustomerHeaders

return: Promise<XMLHttpRequest>

返回一个结果为 XMLHttpRequest 对象的 Promise


用法

const request = window["lib-utility"];

request.get('https://www.baidu.com')
    .then(r => r.text())
    .then(text => console.log(text));

request.post('api/query', { id: 101 })
    .then(r => r.json())
    .then(result => console.log(result.data));

request.upload('api/upload', data, {
    progress: ev => {
        console.log(`loaded: ${ev.loaded}, total: ${ev.total}`);
    }
})
    .then(() => console.log('done.'));