ES6-fetch

fetch

事实标准，并不存在与ES6规范中，基于Promise实现。

目前项目中对Promise的兼容性尚存在问题，如果在项目中应用fetch，需要引入es6-promise和fetch。

fis3中可以通过fis3 install es6-promise和fis3 install fetch进行安装。

以下提到为了浏览器兼容而引入的fech组件时统一使用'fech组件'代替。

该文档重点针对fetch组件进行详细说明。

相关概念

• Request、Response、Header、Body：事实标准中暴露在window对象中，但在fetch组件中没有对外暴露接口，项目中不能使用，因此暂不做深入了解。在RN中可以直接使用
• 返回Promise对象

基本用法

• get

fetch('/test/content.json').then(function(data){
    return data.json();
}).then(function(data){
    console.log(data);
}).catch(function(error){
    console.log(error);
});

• post

fetch('/test/content.json', { // url: fetch事实标准中可以通过Request相关api进行设置
    method: 'POST',
    mode: 'same-origin', // same-origin|no-cors（默认）|cors
    credentials: 'include', // omit（默认，不带cookie）|same-origin(同源带cookie)|include(总是带cookie)
    headers: { // headers: fetch事实标准中可以通过Header相关api进行设置
        'Content-Type': 'application/x-www-form-urlencoded' // default: 'application/json'
    },
    body: 'a=1&b=2' // body: fetch事实标准中可以通过Body相关api进行设置
}).then(function(res){ res: fetch事实标准中可以通过Response相关api进行设置
    return res.json();
}).then(function(data){
    console.log(data);
}).catch(function(error){

});

Response相关属性及方法

bodyUsed

• 标记返回值是否被使用过
• 这样设计的目的是为了之后兼容基于流的API，让应用一次消费data，这样就允许了JavaScript处理大文件例如视频，并且可以支持实时压缩和编辑

fetch('/test/content.json').then(function(res){
    console.log(res.bodyUsed); // false
    var data = res.json();
    console.log(res.bodyUsed); //true
    return data;
}).then(function(data){
    console.log(data);
}).catch(function(error){
    console.log(error);
});

headers

• 返回Headers对象，该对象实现了Iterator，可通过for...of遍历

fetch('/test/content.json').then(function(res){
    var headers = res.headers;
    console.log(headers.get('Content-Type')); // application/json
    console.log(headers.has('Content-Type')); // true
    console.log(headers.getAll('Content-Type')); // ["application/json"]
    for(let key of headers.keys()){
        console.log(key); // datelast-modified server accept-ranges etag content-length content-type
    }
    for(let value of headers.values()){
        console.log(value);
    }
    headers.forEach(function(value, key, arr){
        console.log(value); // 对应values()的返回值
        console.log(key); // 对应keys()的返回值
    });
    return res.json();
}).then(function(data){
    console.log(data);
}).catch(function(error){
    console.log(error);
});

ok

• 是否正常返回
• 代表状态码在200-299之间

status

• 状态码
  • 200 成功

statusText

• 状态描述
  • 'OK' 成功

type

• basic：正常的，同域的请求，包含所有的headers。排除Set-Cookie和Set-Cookie2。
• cors：Response从一个合法的跨域请求获得，一部分header和body可读。
• error：网络错误。Response的status是0，Headers是空的并且不可写。当Response是从Response.error()中得到时，就是这种类型。
• opaque： Response从"no-cors"请求了跨域资源。依靠Server端来做限制。

url

• 返回完整的url字符串。如：'http://xxx.com/xx?a=1'

arrayBuffer()

• 返回ArrayBuffer类型的数据的Promise对象

blob()

• 返回Blob类型的数据的Promise对象

clone()

• 生成一个Response的克隆
• body只能被读取一次，但clone方法就可以得到body的一个备份
• 克隆体仍然具有bodyUsed属性，如果被使用过一次，依然会失效

fetch('/test/content.json').then(function(data){
    var d = data.clone();
    d.text().then(function(text){
        console.log(JSON.parse(text));
    });
    return data.json();
}).then(function(data){
    console.log(data);
}).catch(function(error){
    console.log(error);
});

json()

• 返回JSON类型的数据的Promise对象

text()

• 返回Text类型的数据的Promise对象

formData()

• 返回FormData类型的数据的Promise对象

缺陷

• 无法监控读取进度
• 无法中断请求