javascript利用fetch实现异步请求的方法实例

#javascript利用fetch实现异步请求的方法实例
首先是考虑fetch的原声支持情况，safari在10.1 之后才支持，ios更是10.3之后才支持，IE完全不支持。当然新技术的发展总会经历这个过程。


Ajax请求：普通的Ajax请求，用XHR发送一个json 请求一般是这样的：
...
var xhr = new XMLHttpRequest();
xhr.open("GET",url);
xhr.responseType = 'json';
xhr.onload = function(){
console.log(xhr.response);
}
xhr.onerror = function (){
console.log("error")
}
xhr.send();
...
##使用fetch实现的方式：
...
fetch(url).then(function(response){
return response.json();
}) then(function(data){
console.log(data)
}).catch(function(e){
console.log("error")
})
...
也可以用async/await的方式
try(){
let response = await fetch(url);
let data = await response.json();
console.log(data);
} catch(e){
console.log("error")
}


用await后，写异步代码感觉像同步代码一样，await后面可以跟着Promise对象，
表示等待Promise resolve()才能继续下去执行，如果Promise被reject()或
抛出异常那个则会被外面的try...catch捕获


##使用fetch的优点
* 语法简洁，更加语义化
* 给予标准的Promise实现，支持async/await
* 同构方便
但是也有它的不足
* fetch请求默认是不带cookie的，需要设置fetch(url, {credentials: 'include'})
* 服务器返回400，500 这样的错误码不会reject，只有网络错误这些导致请求不能完成时，fetch才会被reject

## fetch的语法


fetch(url,options).then(function (response){
//handle HTTP response
},function(error){
//handle network error
})
## 具体的参数案例：
//兼容包
require('babel-polyfill')
require('es6-promise').polyfill()

import 'whatwg-fetch'

fecth(url, {
method: "POST",
body: JSON.stringify(data),
headers: {
"Content-Type": "application/json"}
},
credentials: "some-origin"
}).then(function(response){
response.status // =>number 100-599
response.statusText  // =>string
response.headers  //=> Headers
response.url //=> String

response.text().then(function(responseText) { ... })
},function(error){
error.message //=>string
})

## 代码解析及参数说明
* url : 定义要获取的资源，这可能是一个USVString 字符串，包含要获取资源的URL。一个requst对象。
* option（可选） ： 一个配置项对象，包括所有对请求的设置。可选的参数有：
. method : 请求使用的方法，如GET/POST.
. header : 请求的头信息，形式为Header 对象或ByteString.
. body: 请求的body信息，可能是一个blob、bufferSource、FormDate、URLSearchParams或者USVString对象。
注意GET或head方法的请求不能包含body信息
. mode: 请求的模式，如cors、 no-cors或者same-orign
. credentials: 请求的credentials，如omit、 same-orign或者include
. cache: 请求的cache模式:default,no-store,reload,force-cache,或者only-if-cached 
* response: 一个Promise，resolve时回传Response对象：
属性：
. statues (number) -HTTP请求结果参数，在100-599范围
. statuesText(string) -服务器返回的状态报告
. ok(boolean) -如果返回200表示请求成功则为true
. header(Headers) -返回头部信息，下面详细介绍
. url (string) -请求的地址
方法：
.text() -以string的形式生成请求text
.json() -生成JSON.parse（responseText）的结果
.blob() -生成一个Blob
.arrayBuffer() -生成一个ArrayBuffer
.formData() -生成格式化的数据，可用于其它的请求
其它方法:
.clone()
.Respnse.error()
.response.redirect()
.response.headers
.has(name) (boolean) -判断是否存在该信息投
.get(name) (string) -获取信息头的数据
.getAll(name) (Array) -获取所有头部数据
.set(name, value) -设置信息头的参数
.append( name, value) -添加header的内容
.delect(name) -删除header的信息
.forEach(function(value, name){ ... },[thisContext]) -循环读取header的信息
## 使用实例
//获取css里ul的id属性
let uldom = document.getElementById("students");
//单独创建一个json对象，获取地址
let url = "data.json";

function main(){
fetch(url).then(response =>{
return response.json();
}).then(students =>{
let html = '';
for(let i = 0; i< students.lengthl; i++){
let name = student[i].name;
let age = student[i].age;
html + ='

姓名：${name}, 年龄： $(age)

'
}
uldom.innerHTML = html;
});
}
main();  
###结合await最终代码：

let uldom = document.getElementById("students");
let url = "data.json";

async function main(){
let response = await fetch(url);
let students = await response.json();

let html = '';
for(let i = 0; i< students.lengthl; i++){
let name = student[i].name;
let age = student[i].age;
html + ='

姓名：${name}, 年龄： $(age)

'
}
uldom.innerHTML = html;
}
main();

data.json 的文件内容：
[ 
  {"name":"张三","age":"3"}, 
  {"name":"李万","age":"1"}, 
  {"name":"王二","age":"4"}, 
  {"name":"二狗","age":"3"}, 
  {"name":"狗蛋","age":"5"}, 
  {"name":"牛娃","age":"7"} 
]
运行后结果为
姓名：张三，年龄：3 
姓名：李万，年龄：1 
姓名：王二，年龄：4 
姓名：二狗，年龄：3 
姓名：狗蛋，年龄：5 
姓名：牛娃，年龄：7