符合 W3C Fetch 规范的 Fetch 接口，用于异步 HTTP 请求。
发起 fetch 请求
| 参数名 | 类型 | 是否可选 | 默认值 | 含义 |
|---|---|---|---|---|
input |
Request String |
请求的资源，具体值为 Request 实例或 URL 地址。更多参考 |
||
init |
Object |
可选 | 请求初始化选项 | |
init.method |
String |
可选 | GET |
请求方式：GET POST |
init.headers |
Headers Object |
可选 | 请求头。更多参考 | |
init.body |
String |
可选 | 请求体 | |
init.mode |
String |
可选 | no-cors |
请求模式：cors no-cors same-origin。 更多参考 |
init.credentials |
String |
可选 | omit |
请求对认证信息（HTTP cookie、TLS 证书、身份验证信息）的处理，可选值为 omit same-origin include |
init.timeout |
Number Boolean |
可选 | 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 |
支持 | 支持 |
| 参数名 | 类型 | 是否必须返回 | 含义 |
|---|---|---|---|
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);
});
对于如 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',
});
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,
});
