【前端库】fetch.js 网络请求

最新推荐文章于 2025-06-16 15:34:34 发布

原创最新推荐文章于 2025-06-16 15:34:34 发布 · 1w 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#fetch #fetch.js #前端 #插件库

前端同时被 2 个专栏收录

46 篇文章

订阅专栏

插件

5 篇文章

订阅专栏

本文介绍fetch API的基础用法，包括如何使用fetch进行网络请求、处理响应数据等，并提供了多个示例帮助理解。

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

前言

fetch 是 window.fetch 的 JavaScript polyfill。全局 fetch 函数是 web 请求和处理响应的简单方式，不使用 XMLHttpRequest。这个 polyfill 编写的接近标准的 Fetch 规范。也就是说现在可以不使用ajax了，除非是兼容很低得浏览器。
该fetch()函数是一个基于Promise的机制，用于在浏览器中编程地制作Web请求。该项目是一个实现标准Fetch规范子集的polyfill，足以fetch在传统Web应用程序中为XMLHttpRequest的大多数用途提供可行的替代方案。
如果你得旧浏览器就得引入 polyfill ，然后在使用这个库。

网址

官方网站： http://github.github.io/fetch/

GitHub：https://github.com/github/fetch

cdn http://www.bootcdn.cn/fetch/

fetch 见解

这里就不做太多得讲解，fetch详解开启传送门

手册地址：https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API

使用

引入脚本

直接在页面中引入脚本，本人建议在body结束标签前面引入，这样是最优化得。

<script src="https://cdn.bootcss.com/fetch/2.0.3/fetch.js"></script>

使用 npm 安装

// 输入
npm install whatwg-fetch --save

// 或者输入下面
bower install fetch

// 或者输入下面
yarn add whatwg-fetch

webpack 使用

为了与webpack一起使用，请entry在应用程序入口点之前将该程序包添加到配置选项中：

entry: ['whatwg-fetch', ...]

对于Babel和ES2015 +，请确保导入文件：

import 'whatwg-fetch'

注意事项

该fetch规范从不同jQuery.ajax()的方式主要有两种即承担牢记：

即使响应是HTTP 404或500，返回的Promise fetch() 也不会拒绝HTTP错误状态。相反，它将正常解析，并且它只会拒绝网络故障或阻止请求完成。

默认情况下，如果站点依赖维护用户会话，fetch 则不会发送或接收来自服务器的任何cookie，导致未经身份验证的请求。请参阅发送cookie以了解如何选择cookie处理。

fetch 方法

语法：

/*
* fetch方法：
*   参数一：URL是请求地址
*   参数二：options是多个参数配置
*/
fetch(url, options).then(function(response) {
  // 成功代码，返回response 结果数据
}, function(error) {
  // 请求错误返回，error是返回错误得类型
})

参数二options配置	说明
method	（字符串） HTTP请求方法。默认：”GET”
body	（字符串，正文类型）HTTP请求正文
headers	（对象，标题）默认值：{}
credentials	（字符串）身份验证凭据模式。默认：”omit”。“omit”：请求中不包含认证凭证（例如cookie）。“same-origin”：将请求中的凭证包含在同一个网站中。“include”：在所有网站的请求中包含凭据

成功响应

这个是在fetch方法请求成功返回得.then()方法中回调函数参数。

.then()回调函数返回参数	参数说明
status	（数字） - 100-599范围内的HTTP响应代码
statusText	（字符串） - 服务器报告的状态文本，例如“未经授权”
ok（boolean）	如果status是HTTP 2xx，则返回true
headers	在下面有相应得方法，返回头部信息得一些，可以通过一些方法及属性操作。
url	（串）返回请求得链接。
text()	以String形式产生响应文本。
json()	产生的结果是一个对象， JSON.parse(responseText)
blob()	产生一个Blob 。本地临时存储路径。
arrayBuffer()	产生一个ArrayBuffer，二进制处理
formData()	产生可以转发到另一个请求的FormData
clone()
Response.error()
Response.redirect()

headers 参数详情

在上面.then()方法成功返回headers对象。语法： new Headers(hash)

实例化得返回得对象	方法及属性说明
has(name)	（布尔值）查找，下面所说得key是否存在，如果存在则，进入。
get(name)	（串）获取自定义或默认有的请求头信息。可以跟下面得说得一样，写上key值，就可以获取值。
set(name, value)	设置请求头信息，set(key,值)。跟cookie格式。
append(name, value)	添加进去
delete(name)	删除那个key值即可
forEach(function(value, name){ … }, [thisContext])	遍历里面得数据。

案例

开启本地服务器才能跑！
开启本地服务器才能跑！
开启本地服务器才能跑！
重要得事情说三遍！

获取html文件

// 这里由于不懂跨域请求到html文件。所以这里直接复制一段官方得吧，自己可以测试。
fetch('/users.html')
  .then(function(response) {
    return response.text()
  }).then(function(body) {
    document.body.innerHTML = body
  })

JSON

写法一和写法二其实是一样得。只不过写法二是当错误得时候回调都是同一个函数。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        #box {
            width: 120px;
            height: 120px;
            position: relative;
            top: 0;
        }
        #box img {
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            margin: auto;
        }
    </style>
</head>
<body>
    <div id="box">
        <img src="http://img.lanrentuku.com/img/allimg/1212/5-121204193R5-50.gif">
    </div>
    <script src="https://cdn.bootcss.com/fetch/2.0.3/fetch.js"></script>
    <script type="text/javascript">
        // 写法一
        fetch("http://m.lolku.cn/lib/api/city_thoughtful.php?format=json").then(function(Response) {
            console.log('请求成功，并且返回对象：',Response);
            // 处理json得方法
            Response.json().then(function (data){
                console.log(data)
            }).catch(function(err) {
                console.log('err', ex)
              })
        }).catch(function(err){
            console.log("Fetch错误:"+err);
        })
        // 写法二（推荐）：
        fetch("http://m.lolku.cn/lib/api/city_thoughtful.php?format=json").then(function(response) {
            // 使用return 将数据返回对象。
             return response.json();
        }).then(function (data) {
            console.log('返回json数据',data);
        }).catch(function(ex) {
            console.log('parsing failed', ex)
          })
        /*
        拆分写法二：
        var jsonObj = fetch("http://m.lolku.cn/lib/api/city_thoughtful.php?format=json").then(function(response) {
            // 使用return 将数据返回对象。
             return response.json();
        })
        jsonObj.then(function (data) {
            console.log('返回json数据',data);
        })
        */
    </script>
</body>
</html>

响应属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        #box {
            width: 120px;
            height: 120px;
            position: relative;
            top: 0;
        }
        #box img {
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            margin: auto;
        }
    </style>
</head>
<body>
    <div id="box">
        <img src="http://img.lanrentuku.com/img/allimg/1212/5-121204193R5-50.gif">
    </div>
    <script src="https://cdn.bootcss.com/fetch/2.0.3/fetch.js"></script>
    <script type="text/javascript">
        fetch("http://m.lolku.cn/lib/api/city_thoughtful.php?format=json").then(function(response) {
          console.log('headers的类型：'+response.headers.get('Content-Type'));
          console.log('请求时间：'+response.headers.get('Date'));
          console.log('请求状态：'+response.status);
          console.log('请求状态返回字符串：'+response.statusText);
          response.json().then(function (data) {
            box.innerHTML = JSON.stringify(data.result);
            console.log(data);
          })
        }).catch(function(err){
            console.log("Fetch错误:"+err);
        })
    </script>
</body>
</html>