fetch的介绍和使用

最新推荐文章于 2025-05-16 18:46:49 发布

UMU-UMU

最新推荐文章于 2025-05-16 18:46:49 发布

阅读量1.5k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： fetah 文章标签： fetch

本文链接：https://blog.youkuaiyun.com/weixin_44772522/article/details/91883107

fetah 专栏收录该内容

0 篇文章

订阅专栏

Fetch是ES6中基于Promise设计的一种数据获取方法，作为AJAX的替代品，其语法简洁、支持async/await，并提供了更丰富的API。相较于XMLHttpRequest，Fetch更底层且更加语义化，适用于同构开发。GET和POST请求的使用让Fetch在实际应用中表现出更高的灵活性。

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

Fetch

什么是fetch

fetch号称是AJAX的替代品，是在ES6出现的，使用了ES6中的promise对象。Fetch是基于promise设计的。Fetch的代码结构比起ajax简单多了，参数有点像jQuery ajax。但是，一定记住fetch不是ajax的进一步封装，而是原生js，没有使用XMLHttpRequest对象。

优势

语法简洁，更加语义化
基于标准 Promise 实现，支持 async/await
同构方便，使用 isomorphic-fetch
4.更加底层，提供的API丰富（request, response）
5.脱离了XHR，

使用

GET请求

// 通过fetch获取百度的错误提示页面
fetch('https://www.baidu.com/search/error.html', {
    method: 'GET'
  })
  .then((res)=>{
    return res.text()  // res.json();
  })
  .then((res)=>{
    console.log(res)
  })

POST请求

// 通过fetch获取百度的错误提示页面
fetch('https://www.baidu.com/search/error.html', {
    method: 'POST',
    body: new URLSearchParams([["foo", 1],["bar", 2]]).toString() // 这里是请求对象
  })
  .then((res)=>{
    return res.text()
  })
  .then((res)=>{
    console.log(res)
  })