Fetch 请求

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

API 调用

QN.fetch(input, init)

发起 fetch 请求

API 调用入参

名称 类型 是否可选 含义
input Request 或 String 请求的资源，具体值为 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。 更多参考

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);
});

参考