Fetch 请求

符合 W3C Fetch 规范的 Fetch 接口,并扩展实现了JSONP模式,用于异步请求,类似 Ajax。

API 调用

QN.fetch(input, init)

发起 fetch 请求

API 调用入参

名称 类型 是否可选 含义
input RequestString 请求的资源,具体值为 Request 实例或 url 地址。 注:在 QAP 环境中仅支持 url 地址,且需要是完整的 url,不支持相对路径更多参考
init Object 请求初始化选项
init.method String optional 请求方式:GET POST
init.headers Object optional 请求头。更多参考
init.body Body optional 请求体 注:在 QAP 中仅支持 String更多参考
init.dataType String optional 数据类型:json text。该选项为扩展 Fetch 规范的选项,仅在 QAP 环境下支持。
init.mode String optional 请求模式:cors no-cors same-origin jsonp更多参考
init.credentials String optional 认证信息(一般为cookie),可选值为 omit(忽略)、same-origin(同源)include(包含)

API 响应结果

名称 类型 是否必须返回 含义
response Response 响应对象

调用示例

QN.fetch('./api.json', {
    method: 'POST',
    body: 'id=233&t=20161013',
    mode: 'same-origin',
    dataType: 'json',
})
.then(response => {
    return response.json(); // => 返回一个 `Promise` 对象
})
.then(data => {
    console.log(data); // 真正地数据结果
})
.catch(error => {
    console.log(error);
});

拼装 query string

let queryString = QN.uri.toQueryString({
    x: 1,
    y: 2,
});
let body = QN.uri.toQueryString({
    id: 123,
    t: 20161013,
});

QN.fetch('./api.json' + '?' + queryString, {
    method: 'POST',
    body: body,
    mode: 'same-origin',
    dataType: 'json',
})
.then(response => {
    return response.json(); // => 返回一个 `Promise` 对象
})
.then(data => {
    console.log(data); // 真正地数据结果
})
.catch(error => {
    console.log(error);
});

参考