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對象

缺陷

• 沒法監控讀取進度
• 沒法中斷請求