首页 > 代码库 > 基于Promise对象的新一代Ajax API--fetch
基于Promise对象的新一代Ajax API--fetch
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 *****************************************************************
基于Promise对象的新一代Ajax API--fetch
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。