fetch请求

最新推荐文章于 2024-11-05 14:21:06 发布

森姐姐

最新推荐文章于 2024-11-05 14:21:06 发布

阅读量284

点赞数

CC 4.0 BY-SA版权

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_42799526/article/details/114182640

前端专栏收录该内容

4 篇文章

订阅专栏

博客介绍了fetch发送网络请求的相关内容。fetch是原生函数，采用关注分离思想，老版本浏览器可能不支持。介绍了使用fetch发送网络请求的统一错误处理方式，还提及结合async、await发送请求时，用try catch处理错误信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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