基於Promise對象的新一代Ajax API--fetch

標籤：timeout   json對象   字元   bad   ack   16px   數組   .text   throw   

 1 ***************************************************************** 2 #fetch Request 使用isomorphic-fetch發送fetch請求 3  4 import fetch from ‘isomorphic-fetch‘;  //ES6中為window原生方法 5  6 fetch(url,{ 7     method: "POST", 8       headers: {"Content-Type": "text/plain"}, 9       body: "firstName=Nikhil&favColor=blue&password=easytoguess"10 }).then(function(response) {11     if (response.status >= 400) {  //判斷請求是否成功12         throw new Error("Bad response from server!");13     }14     //response.headers.get(‘Content-Type‘)15     //response.headers.get(‘Date‘)16     //response.status17     //response.statusText18     //response.type19     //response.url20 21     return response.json();  //將Promise對象轉成json對象22     //.text()：返回字串23     //.json()：返回一個JSON對象24     //.formData()：返回一個FormData對象25     //.blob()：返回一個blob對象26     //.arrayBuffer()：返回一個位元組27 }).then(function(json) {28     console.log(json);  //執行你的代碼29 }).catch(function(ex) {30     console.log(‘request failed‘, ex);  //異常處理31 });32 *****************************************************************33 34 *****************************************************************35 #JSONP Request 使用fetch-jsonp發送jsonp請求36 37 import fetchJsonp from ‘fetch-jsonp‘;38 39 fetchJsonp(url,{40     jsonp:‘callback‘,  //可不設定，預設產生為callback41     jsonpCallback:‘myCallback‘,  //可不設定，預設產生隨機名稱42     timeout:3000,  //可不設定，預設500043     data:{a:1},  //參數  最後產生url?a=1&callback=myCallback的請求44 }).then(function(response) {45     return response.json();  //接受結果為Promise對象，轉成json對象46 }).then(function(json) {47     console.log(json);  //執行你需要的代碼48 }).catch(function(ex) {49     console.log(‘parsing failed‘, ex);  //異常處理50 })51 52 !!!jsonp返回的資料不能是純json，而是"函數名(json)"的js代碼53 *****************************************************************

 

基於Promise對象的新一代Ajax API--fetch