1.3.1.2 QN.fetch

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

1.1. API 调用

1.1.1. QN.fetch(input, init)

发起 fetch 请求

API 调用入参

参数详解：

• 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 的值不能设置为 *，必须指定域名规则。否则请求会报错。

API 响应结果

调用示例

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

1.2. 参考

• Fetch API 简介
• Fetch API - Web API 接口 | MDN
• window.fetch - Web API 接口 | MDN
• Request - Web API 接口 | MDN
• Request() - Web API 接口 | MDN
• Response - Web API 接口 | MDN
• Response() - Web API 接口 | MDN
• Headers - Web API 接口 | MDN
• Headers() - Web API 接口 | MDN
• Body - Web API 接口 | MDN
• HTTP 访问控制（CORS） - HTTP | MDN
• Fetch 规范
• Fetch documentation
• That's so fetch!