1、特点
- fetch是原生函数,不再使用XmlHttpRequest对象提交ajax请求
- 老版本浏览器可能不支持
fetch请求是一种关注分离的思想
2、发送网络请求-使用fetch
fetch(`/api1/search/user2?q=${keyWord}`).then(
response => {
console.log('联系服务器成功了');
return response.json();
},
error => {
console.log('联系服务器失败了');
return new Promise(() => {}); // 返回一个空的promise就不会在往下继续执行了
}
).then(
response => {console.log('获取数据成功了', response);},
error => {console.log('获取数据失败了', error);}
)
使用统一错误处理方式(优化)
fetch(`/api1/search/user2?q=${keyWord}`).then(
response => {
console.log('联系服务器成功了');
return response.json();
}
).then(
response => {console.log('获取数据成功了', response);}
).catch(
error => {console.log('请求出错', error);}
)
3、结合async, await发送请求
search = async() => {
const response = await fetch(`/api1/search/user2?q=${keyWord}`);
const data = await response.json();
console.log(data);
}
由于await是不能处理请求出错信息的,所以我们一般用try catch来处理错误信息
try {
const response = await fetch(`/api1/search/user2?q=${keyWord}`);
const data = await response.json();
console.log(data);
} catch (error) {
console.log('请求出错', error);
}