Fetch是一個處理網絡請求的框架, 支持了大部分常用的 HTTP 的請求以及和 HTTP 標準的兼容,如 HTTP Method,HTTP Headers,Request,Response。代替Ajax可以更加方便的處理異步請求。
點擊查看fetch兼容性一覽表
注:在 Chrome 瀏覽器中已經全局支持了 fetch 函數,window.fetch就可以訪問到該方法。打開調試工具,在 Console 中可以進行調試和使用。
第一個參數是請求的URL,第二個參數是一個參數對象用于配置請求。請求對象一旦創建了, 你便可以將所創建的對象傳遞給fetch()方法。
另外,可以給fetch統一傳遞一個request 對象,所以也可以通過如下代碼配置和發送請求:
var req = new Request(URL, {method: 'GET', cache: 'reload'});fetch(req).then(function(response) { return response.json();}).then(function(json) { //do something here});注:使用fetch請求之后,返回一個PRomise,所以可以使用fetch().then()
處理
Request 對象表示一次 fetch 調用的請求信息。傳入 Request 參數來調用 fetch, 可以執行很多自定義請求的高級用法。 常用的參數配置有: 1. method - 支持 GET, POST, PUT, DELETE, HEAD 2. url - 請求的 URL 3. headers - 對應的 Headers 對象 4. referrer - 請求的 referrer 信息 5. mode - 可以設置 cors, no-cors, same-origin 6. credentials - 設置 cookies 是否隨請求一起發送??梢栽O置: omit, same-origin 7. redirect - follow, error, manual 8. integrity - subresource 完整性值(integrity value) 9. cache - 設置 cache 模式 (default, reload, no-cache)
注意:只有第一個參數 URL 是必需的。在 Request 對象創建完成之后, 所有的屬性都變為只讀屬性.
使用fetch網路請求之后,在then
的回調函數內接收到response
參數,代碼如上,關于該參數的詳細解釋
常用的幾個有:(可以查看上文的截圖) 1. Response.status 也就是 StatusCode,如成功就是 200 ; 2. Response.statusText 是 StatusCode 的描述文本,如成功就是 OK ; 3. Response.ok 一個 Boolean 類型的值,判斷是否正常返回,也就是StatusCode 為 200-299
https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API http://web.jobbole.com/84924/ http://blog.csdn.net/renfufei/article/details/51494396 http://stackoverflow.com/questions/29775797/fetch-post-json-data
新聞熱點
疑難解答