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);
}