1. Fetch 请求

符合 W3C Fetch 规范的 Fetch 接口，用于异步 HTTP 请求。

1.1. API 调用

1.1.1. QN.fetch(input, init)

发起 fetch 请求

API 调用入参

参数名	类型	是否可选	默认值	含义
`input`	`Request` `String`			请求的资源，具体值为 `Request` 实例或 URL 地址。更多参考
`init`	`Object`	`optional`		请求初始化选项
`init.method`	`String`	`optional`	`GET`	请求方式：`GET` `POST`
`init.headers`	`Headers` `Object`	`optional`		请求头。更多参考
`init.body`	`String`	`optional`		请求体
`init.mode`	`String`	`optional`	`no-cors`	请求模式：`cors` `no-cors` `same-origin`。更多参考
`init.credentials`	`String`	`optional`	`omit`	请求对认证信息（HTTP cookie、TLS 证书、身份验证信息）的处理，可选值为 `omit` `same-origin` `include`
`init.timeout`	`Number` `Boolean`	`optional`	`false`	超时时间，单位：ms，为 `false` 时表示不考虑超时

参数详解：

init.body：请求体，在不同类型的页面环境中，支持程度不一（见下表），需开发者选择使用。
init.mode：请求模式，该字段仅在 Web 页面环境中有效。
- cors：全称为 Cross-Origin Resource Sharing （跨域资源共享），通常用于跨域请求，如从第三方提供的 API 获取数据。该模式需要遵守 CORS 协议，服务端按照协议进行配置正确才能支持跨域请求。
- no-cors：该模式也允许跨域请求，例如请求来着 CDN 的图片、脚本或者其他一些跨域资源。但是和 cors 不同的是，通过 no-cors 模式请求的资源，开发者可以使用它，但是不能读取或修改资源的内容。如：开发者能加载公共 CDN 的JS类库脚本并使用它，但是不能修改脚本的内容。这样确保了跨域资源的安全性。同时，该模式下请求的 method 只能是 HEAD、GET 或 POST。
- same-origin：同源模式，该模式很简单，如果一个请求是跨域的，那么将返回一个 error，这样确保所有的请求遵守同源策略。所以该模式下，发起请求的域和请求的域必须相同才能请求成功。
init.credentials：请求对认证信息的处理，该字段仅在 Web 页面环境下有效。认证信息有：HTTP cookie、TLS 证书、身份验证信息。
- omit：忽略认证信息。
- same-origin：同源模式。发起请求的域和请求的域相同，该模式下会自动携带认证信息。
- include：包含。当 mode 为 cors 时，请求默认是不携带认证信息的，如果服务端需要认证信息信息，则可以将这个字段设置为 include。另外，当此字段的值为 include 时，服务端响应头的 Access-Control-Allow-Origin 的值不能设置为 *，必须指定域名规则。否则请求会报错。

`init.body`	Native 页面支持	Web 页面支持	备注
`Blob`	✖️	✔️
`File`	✖️	✔️	继承并扩展自 `Blob`
`ArrayBuffer`	✖️	✔️	属于 `BufferSource`
`ArrayBufferView`	✖️	✔️	属于 `BufferSource`
`FormData`	✖️	✔️
`URLSearchParams`	✖️	✔️
`String`	✔️	✔️

API 响应结果

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

调用示例

// input 是 Request
let request = new Request('http://qianniu.taobao.com/api/todo', {
    method: 'POST',
    headers: {
        'Accept': 'application/json, application/javascript',
        'Content-Type': 'application/x-www-form-urlencoded',
    },
    body: 'id=233&content=hello',
    mode: 'same-origin',
});

QN.fetch(request)
.then(response => {
    return response.json(); // => 返回一个 `Promise` 对象
})
.then(data => {
    console.log(data); // 真正地数据结果
})
.catch(error => {
    console.log(error);
});

// input 是 URL String
QN.fetch('http://qianniu.taobao.com/api/todo', {
    method: 'POST',
    headers: {
        'Accept': 'application/json, application/javascript',
        'Content-Type': 'application/x-www-form-urlencoded',
    },
    body: 'id=233&content=hello',
    mode: 'same-origin',
})
.then(response => {
    return response.json(); // => 返回一个 `Promise` 对象
})
.then(data => {
    console.log(data); // 真正地数据结果
})
.catch(error => {
    console.log(error);
});

场景示例

如何让服务端正确解析请求 body

对于如 Spring 等常见的服务端 MVC 框架，会自动解析请求的数据，比如 query string 和 body。一般情况下，解析时框架会根据 HTTP 请求头中的 Content-Type 字段来判断 body 类型，再调用相应的类库。因此，请求时在请求头中设置正确的 Content-Type，帮助服务端正确解析请求数据：

// body 的类型是 JSON
QN.fetch('http://qianniu.taobao.com/api/todo', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json',
    },
    body: JSON.stringify({
        id: 233,
        content: 'hello',
    }),
});

// body 的类型是 text
QN.fetch('http://qianniu.taobao.com/api/todo', {
    method: 'POST',
    headers: {
        'Content-Type': 'text/plain',
    },
    body: 'Hello QAP',
});

// body 的类型是 query string 的形式， Content-Type 可以省略
QN.fetch('http://qianniu.taobao.com/api/todo', {
    method: 'POST',
    headers: { },
    body: 'id=233&content=hello',
});

请求 URL 添加 query string

let queryString = QN.uri.toQueryString({
    x: 1,
    y: 2,
});

let body = QN.uri.toQueryString({
    id: 233,
    content: 'hello',
});

QN.fetch(`http://qianniu.taobao.com/api/todo?${queryString}`, {
    method: 'POST',
    body: body,
});

QN.fetch