第十二周作业

FETCH

详解Fetch API

兼容性

注意：由于Fetch API是基于Promise设计，旧浏览器不支持Promise，需要使用pollyfill es6-promise

1. Fetch使用说明

fetch(url, options).then(function(response) { 
// handle HTTP response
}, function(error) {
 // handle network error
})

说明：
a. fetch api返回的是一个promise对象
b.Options:

• method(String): HTTP请求方法，默认为GET
• body(String): HTTP的请求参数
• headers(Object): HTTP的请求头，默认为{}
• credentials(String): 默认为omit,忽略的意思，也就是不带cookie;还有两个参数，same-origin，意思就是同源请求带cookie；include,表示无论跨域还是同源请求都会带cookie

c.第一个then函数里面处理的是response的格式，这里的response具体如下：

 

image.png

• status(number): HTTP返回的状态码，范围在100-599之间
• statusText(String): 服务器返回的状态文字描述，例如Unauthorized,上图中返回的是Ok
• ok(Boolean): 如果状态码是以2开头的，则为true
• headers: HTTP请求返回头
• body: 返回体，这里有处理返回体的一些方法
  • text(): 将返回体处理成字符串类型
  • json()： 返回结果和 JSON.parse(responseText)一样
  • blob()： 返回一个Blob，Blob对象是一个不可更改的类文件的二进制数据
  • arrayBuffer()
  • formData()

FETCH

详解Fetch API

兼容性

注意：由于Fetch API是基于Promise设计，旧浏览器不支持Promise，需要使用pollyfill es6-promise

1. Fetch使用说明

fetch(url, options).then(function(response) { 
// handle HTTP response
}, function(error) {
 // handle network error
})

说明：
a. fetch api返回的是一个promise对象
b.Options:

• method(String): HTTP请求方法，默认为GET
• body(String): HTTP的请求参数
• headers(Object): HTTP的请求头，默认为{}
• credentials(String): 默认为omit,忽略的意思，也就是不带cookie;还有两个参数，same-origin，意思就是同源请求带cookie；include,表示无论跨域还是同源请求都会带cookie

c.第一个then函数里面处理的是response的格式，这里的response具体如下：

 

image.png

• status(number): HTTP返回的状态码，范围在100-599之间
• statusText(String): 服务器返回的状态文字描述，例如Unauthorized,上图中返回的是Ok
• ok(Boolean): 如果状态码是以2开头的，则为true
• headers: HTTP请求返回头
• body: 返回体，这里有处理返回体的一些方法
  • text(): 将返回体处理成字符串类型
  • json()： 返回结果和 JSON.parse(responseText)一样
  • blob()： 返回一个Blob，Blob对象是一个不可更改的类文件的二进制数据
  • arrayBuffer()
  • formData()

将XMLrequest 改写成fetch

 

var header = document.querySelector('header');
var section = document.querySelector('section');

fetch('https://raw.githubusercontent.com/gmhcy/ONEPIECE/master/onepiece.json')

.then(function(response)

{ return response.json();

})

.then(function(myJson) {

var onepiece = myJson;

onepieceHeader(onepiece);
showpeople(onepiece);

});

 

function onepieceHeader(jsonObj){
var headline=document.createElement('h1');
headline.textContent=jsonObj['tou'];
header.appendChild(headline);
var jies=document.createElement('p');
jies.textContent=jsonObj['jieshao'];
header.appendChild(jies);
}
function showpeople(jsonObj){
var heroes=jsonObj['members'];
for (var i = 0; i <heroes.length; i++) {
var myArticle = document.createElement('article');
var myH2 = document.createElement('h2');
var myPara1 = document.createElement('p');
var myPara2 = document.createElement('p');
var myPara3 = document.createElement('p');
var myPara4 = document.createElement('p');
myH2.textContent = heroes[i].name;
myPara1.textContent = 'age: ' + heroes[i].age;
myPara2.textContent = 'power: ' + heroes[i].power;
myPara3.textContent = 'hobby:'+heroes[i].hobby;
myPara4.textContent = 'dream:'+heroes[i].dream;
myArticle.appendChild(myH2);
myArticle.appendChild(myPara1);
myArticle.appendChild(myPara2);
myArticle.appendChild(myPara3);
myArticle.appendChild(myPara4);
section.appendChild(myArticle);
}
}