【ES6】fetch函数和Promise

fetch函数是现代JavaScript中用于发起HTTP请求的一个非常强大的工具。它返回一个Promise,这个Promise在请求成功时解析为Response对象,或者在请求失败时拒绝。

以下是一个基本的fetch使用示例:

javascript 复制代码
fetch('https://api.example.com/data')
  .then(response => {
    // HTTP状态码为200表示请求成功
    if (response.status === 200) {
      return response.json();
    } else {
      throw new Error('网络请求失败');
    }
  })
  .then(data => console.log(data))
  .catch(error => console.error(error));

在这个例子中,我们首先向https://api.example.com/data发起一个GET请求。然后,我们检查响应的状态码。如果状态码是200,我们尝试将响应的内容解析为JSON。如果解析成功,我们将数据打印到控制台。如果解析失败,或者在任何其他步骤中发生错误,我们捕获这个错误并打印错误信息。

注意,fetch并不直接返回请求的结果,而是返回一个Promise。这是因为网络请求可能会异步完成,所以你不能直接从fetch调用中获取结果。相反,你需要使用then方法或者async/await语法来等待Promise解析。

下面是一个使用async/await语法的相同示例:

javascript 复制代码
async function fetchData() {
  try {
    let response = await fetch('https://api.example.com/data');
    if (response.status === 200) {
      let data = await response.json();
      console.log(data);
    } else {
      throw new Error('网络请求失败');
    }
  } catch (error) {
    console.error(error);
  }
}

fetchData();

在这个例子中,我们使用async/await语法来等待Promise解析。这使得我们的代码看起来更像是同步的代码,但是实际上它仍然是异步的。

相关推荐
工程师老罗14 分钟前
LVGL文本显示问题,编码问题
java·开发语言
痴心阿文15 分钟前
npx create-next-app@latest从Vue迁移的最佳实践
开发语言·前端·javascript
宵时待雨15 分钟前
C++笔记归纳15:红黑树
开发语言·数据结构·c++·笔记
黑眼圈子17 分钟前
牛客刷题记录5
java·开发语言·学习·算法
枫叶丹418 分钟前
【HarmonyOS 6.0】OAID服务正式支持TV设备
开发语言·华为·harmonyos
NGC_661122 分钟前
ConcurrentHashMap介绍
java·开发语言
JY.yuyu24 分钟前
Java Web上架流程(Nginx反向代理+负载均衡 ,Apache配置,Maven安装打包,Tomcat配置)
java·开发语言·前端
Bert.Cai32 分钟前
Python标识符详解
开发语言·python
lifewange33 分钟前
insert
开发语言·python
看山是山_Lau36 分钟前
如何封装和定义一个函数
c语言·开发语言·c++·笔记