fetch请求

1.除了xhr(jq,axios)发送请求外，fetch方式也可以发送请求，fetch是浏览器的内置方法，缺点是不兼容低版本的浏览器

2.fetch方法必须接受一个参数：要请求的路径，和一个可选参数 Request 对象。无论请求成功与否，它都返回一个 Promise 对象

a.请求成功时，会得到请求的 Response 对象
b.请求失败时，会得到一个TypeError
需要注意的是：当接收到一个代表错误的 HTTP 状态码时（如404），从 fetch() 返回的 Promise 不会被标记为 reject，仅当网络故障时或请求被阻止时，才会标记为 reject。但fetch会修改 resolve 返回值的 ok 属性为 false。

未优化版本

fetch('').then(
  //第一次先判断能否联系上服务器
	response => {
    console.log('联系服务器成功');
    return response.json();
  },
  error => {
    console.log('联系服务器失败',error);
    return new Promise(() =>{}) //不返回resolve或者reject则一直在pending状态,则可以终止后续
  }
).then(
  //第二次在判断是否能取数据
	response => {console.log('获取数据成功了',response);),
  error => {console.log('获取数据成功了',response);}
)

优化版本

fetch('').then(
  //第一次先判断能否联系上服务器
	response => {
    console.log('联系服务器成功');
    return response.json();
  },
).then(
  //第二次在判断是否能取数据
	response => {console.log('获取数据成功了',response);),
).catch(
	error =>{console.log('请求出错',error);}
)

使用await,记得方法中要加async

// 因为await只会返回成功的回调函数，所以使用try
try {
    const response = await fetch('')
	const data = await response.json()
	console.log(data)
} catch(error){
  console.log(error);
}