基于Promise对象的新一代Ajax API--fetch

Posted 2020-09-15 光何

 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.status
17     //response.statusText
18     //response.type
19     //response.url
20 
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‘,  //可不设置，默认生成为callback
41     jsonpCallback:‘myCallback‘,  //可不设置，默认生成随机名称
42     timeout:3000,  //可不设置，默认5000
43     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 *****************************************************************