前端网络请求：Fetch

最新推荐文章于 2025-06-01 12:58:36 发布

钬码狼酷

最新推荐文章于 2025-06-01 12:58:36 发布

阅读量817

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： Fetch

本文链接：https://blog.youkuaiyun.com/xhwnous/article/details/83416221

Fetch API作为XMLHttpRequest的替代，旨在提供更简洁、符合关注分离原则的网络请求方式，尤其通过Promise解决了回调地狱问题。虽然在旧浏览器中需要polyfill支持，且错误处理需额外封装，但其易用性和广泛浏览器支持使其成为现代前端开发的优选。本文涵盖了Fetch的基本用法，包括HTML交互、JSON处理、响应元数据、表单POST、JSON POST以及文件上传。

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

Fetch

Fetch要解决的问题：

1.XMLHttpRequest 的API比较粗糙，不符合关注分离的原则，除浏览器的兼容性外，还饱受回调地狱的折磨。

2.jQuery实现的AJAX，兼容性和易用性方面有很大的改善，但是依然没有逃脱回调的折磨。

Fetch API 基于Promise设计，极大改善了回调问题，使用起来和jQuery一样的方便，且绝大多数浏览器都支持Fetch。

（旧浏览器不支持Promise，需要使用pollyfill es6-promise；Fetch报错处理不友好，4xx、5xx需要单独封装处理）

Fetch github 常用API

HTML

fetch('/users.html')
  .then(function(response) {
    return response.text()
  }).then(function(body) {
    document.body.innerHTML = body
  })

JSON

fetch('/users.json')
  .then(function(response) {
    return response.json()
  }).then(function(json) {
    console.log('parsed json', json)
  }).catch(function(ex) {
    console.log('parsing failed', ex)
  })