fetch请求

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