npm包Neo-fetch使用教程

在前端开发中，我们经常需要从API中获取数据，而这个请求和响应的过程需要利用到fetch方法。fetch是原生javascript中的方法，它能够发送异步请求和接收响应。但是，使用fetch也存在一些问题。Neo-fetch是一个依赖于fetch的npm包，它可以增强原生fetch，提供更多丰富的功能和安全性。

安装 Neo-fetch

在终端中输入以下命令可安装Neo-fetch：

--- ------- ---------

Neo-fetch 概述

Neo-fetch是一个基于Fetch API的库，对Fetch API进行了封装，向外提供了一整套promise based的API，简化了fetch的复杂性，同时在fetch的请求中快速提供了诸如拦截、请求重试、取消请求等需要注意的处理。

Neo-fetch的优点：

  • 提供Promise操作：代码更加简洁，易于维护。
  • 对Response数据可做多层解构，包括body blob、buffer、text、json。
  • 拦截器，可在请求、响应中间做处理。
  • 支持请求和响应缓存、超时和自动重试。

Neo-fetch的基本使用

------ -------- ---- ------------

---------------------------------
    --------- -- -
        ------ -----------
    --
    ---------- -- -
        ------------------
    --
    ---------- -- -
        -----------------
    ---

Neo-fetch对原生fetch进行了封装，使用方法基本相同，返回的也是promise对象。

Neo-fetch配置项

  • method：请求方法，默认为GET。
  • headers：请求头，默认为空对象。
  • body：请求体，默认为空字符串。
  • cache：控制浏览器缓存，可以有default、no-cache、reload、force-cache或only-if-cached这几个值，默认为default。
  • credentials：授权信息，包含omit、same-origin或include，默认为same-origin。

方法示例：

-- --- -------- --------
------------------------------------- -
    ------ -----------
--
    --------- -- -----------
    ---------- -- ------------------
    ---------- -- ------------------

-- ---- ------- ---- ------- ------
-------------------------------- -
    ------- -------
    -------- -
        --------------- -------------------
        --------- -------------------
    --
    ----- ----------------
        ----- ----------
        ------ ----------------------
    ---
--
    --------- -- -----------
    ---------- -- ------------------
    ---------- -- ------------------

Neo-fetch拦截器

Neo-fetch拦截器是强大的请求中间件，它允许我们从一个转换器上修改请求数据。

使用示例：

请求时添加公共请求头：

------ - ---------------- - ---- ------------

-------- ---------------- -
    ---------------------------- - ----------------------------------
    ------ -------
-

---------------------------

--------------------- -
    ------- -------
    ----- -------------------
--
    --------- -- -----------------
    ---------- -- ------------------

使用拦截器来自定义响应格式：

------ - ----------------- - ---- ------------

-------- ------------------------ -
    -- ------------- -
        ------ --------------------------------- -- -
            -- ------------------ --- -- -
                ----- -------------
            -
            ------ -------------
        ---
    - ---- -
        ----- ----------------
    -
-

----------------------------------

---------------------
    --------- -- -----------------
    ---------- -- ------------------

Neo-fetch缓存

Neo-fetch支持请求和响应的缓存。我们可以把一些重复的请求缓存起来，然后无须重新请求，直接利用缓存即可。

缓存请求示例：

------ - ---------------- - ---- ------------

-- -----------
-------- --------------------------- -
    ----- --------- - ------------- - ------------------ - ----------
    ------ ------------- -- --------- -- ----------------- -- --- ----------------------- -- --- -------
-

-- ---------
-------- ------------------- -
    ----- ----- - --------------
    ----- -------- - ----- -- -----------------
    ----- ------------- - -------------------

    -- ----------------------------- -
        ------------------ ------
        ------ -------------------------------
    -

    ----- --------------- - ----------------- ---------------- -- --------------------
    -- ------ -- --------- -
        ----------------------------- -- -
            ----- ------- - --- --------------- - ----------------
            ------------------ - ----- --------- -------- --------------------- ---
        ---
    -
    ------ ----------------
-

------------------------------

----- -------- - ---------------------
------------------------------- - ------ ------ --------- -------- ----- --
    --------- -- -----------------
    ---------- -- ------------------

缓存响应示例：

------ - ----------------- - ---- ------------

----- ----- - --- ------

-------- --------------------- -
    -- --------------------------------------------------------------------- -- ---------------------------- --- ----------- -
        ------ -----
    -

    ----- -------- - ---------
    ----- ----------- - ---------------------------------
    ----- ------- - --------------------------------

    -- --------- -- -------------------- -
        ------ -------------------------------------
    -

    ----- -------- - --------------------

    -- --------- -- -------- -
        ------------------- ----------
    -

    ------ ---------
-

-----------------------------------

---------------------
    --------- -- -----------------
    ---------- -- ------------------

Neo-fetch重试机制

请求在网络环境不好或者服务器异常时，有可能请求会失败。Neo-fetch提供了重试请求的机制，使得请求遇到失效后可以自动重试。

重试请求示例：

------ - ---------------- - ---- ------------

-------- --------------------------- -
    --- ---------- - --
    --- ---------- - ------
    ----- - ---- ------- - - -------

    -------- --------- -
        -------------

        -- ----------- - ------------------ -
            ------ ------------------ -------------- ------ ----- -------------------- ------------
        -

        ------ ---------- -----
            --------- -- -
                -- ----------- -- --- -- ---------- - ---- -
                    ------ -------------------
                -

                ---------- - -----

                ------ -----------------------
            --
            ---------- -- -
                -- ------------- -
                    ------ ----------
                -

                ------ --------------------
            ---
    -

    ------ ----------
-

--------------------------------------

--------------------- - ----------- - --
    --------- -- -----------------
    ---------- -- ------------------

以上就是本篇关于npm包neo-fetch的介绍以及使用教程的详细说明，希望能对你有所帮助。让我们用neofetch来更加方便、高效和安全的处理请求和响应。

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6006737c890c4f7277584175

阅读全文

猜你喜欢

  • npm 包 egrow-vue-generator 使用教程

    前言 在前端开发中，Vue 是一个非常流行和优秀的框架。在 Vue 项目的开发中，经常需要创建一些基本的文件和文件夹结构，如组件、页面、路由等等。这些基本的文件和文件夹结构需要手动创建，费时费力。

    4 年前
  • npm 包 artcode-tool 使用教程

    作为一名前端开发人员，我们通常都会遇到需要快速生成可视化界面的需求。在这种情况下，我们可以使用一些类似 artcode-tool 的工具来帮助我们节省时间和精力。 artcode-tool 是一个 n...

    4 年前
  • npm 包 line-clamp 使用教程

    在前端开发中，我们经常需要对长文本进行截断处理，以便用户更好地阅读内容。而 line-clamp 就是一款非常实用的 npm 包，可以帮助我们轻松地实现文本截断效果。

    4 年前
  • npm 包 za-id 使用教程

    前言 在前端开发中，经常需要生成一些唯一的字符串或者 ID，而这些字符串或者 ID 需要具有唯一性和可读性，这时候我们通常会选择使用第三方库来帮助我们完成。za-id 就是一款可以生成唯一 ID 的 ...

    4 年前
  • npm 包 @nepada/eslint-config 使用教程

    介绍 随着前端项目越来越复杂, 代码规范的重要性不断被强调。 eslint 可以帮助我们统一前端项目的代码风格，保证代码质量更加稳定，降低维护成本。本文将重点介绍如何使用 npm 包 @nepada/...

    4 年前
  • npm 包 @sammyne/vuepress-theme-sammyne 使用教程

    介绍 @sammyne/vuepress-theme-sammyne 是一个基于 VuePress 的主题包，致力于提供美观、易用的文档和博客展示形式。本文将介绍如何使用这个 npm 包。

    4 年前
  • npm 包 @ngxa/rules 使用教程

    简介 @ngxa/rules 是 Angular 属于一个优秀的 npm 包，是一个使得 Angular 应用开发更易于维护的解决方案。通过使用 @ngxa/rules，开发人员可以定义规则，并将这些...

    4 年前
  • npm 包 anyid 使用教程

    在前端开发过程中，生成唯一的 ID 通常是必不可少的。为了实现这一目的，我们可以使用 npm 包 anyid。 安装 使用 npm 安装 anyid： --- ------- -----使用 在代码中...

    4 年前
  • npm 包 grunt-untar-new 使用教程

    前言 在前端开发中，我们常常需要将一些文件打包压缩，以便于在生产环境中使用。而在开发过程中，也需要解压缩这些文件，并将其部署到开发环境中。这时候，npm 包 grunt-untar-new 可以帮助我...

    4 年前
  • npm 包 com.mytests.moduletests 使用教程

    前言 npm 好像已经成为了前端开发中的必备工具，这里向大家推荐一下 com.mytests.moduletests 这个 npm 包，它可以帮助我们更加便捷地测试我们的 JavaScript 代码。

    4 年前
  • npm 包 ewares 使用教程

    在前端开发中，我们经常需要使用第三方库或组件来提高开发效率或功能实现。其中，npm 是 Node.js 的包管理器，是前端开发中常用的包管理工具之一。其中一个非常实用的 npm 包就是 ewares。

    4 年前
  • npm包 service-systemd 使用教程

    简介 在 Node.js 的应用中，我们常常需要在操作系统中注册服务，让我们的应用随操作系统启动而启动，并能够通过操作系统的服务管理工具来进行管理，比如 systemctl。

    4 年前
  • npm 包 javascript-lint 使用教程

    在前端开发过程中，我们经常需要使用 Javascript。不过，由于 Javascript 的灵活性，编写出高质量的代码是一件比较困难的事情。这时候，我们就需要使用一些工具来帮助我们进行代码规范和错误...

    4 年前
  • npm 包 jslrc 使用教程

    前言 在开发前端项目时，我们经常使用 JavaScript 来编写代码。但是由于 JavaScript 语言的设计缺陷以及历史遗留问题等原因，代码质量往往参差不齐，不符合规范，这导致代码可读性、可维护...

    4 年前
  • npm 包 my-npm-utils 使用教程

    简介 my-npm-utils 是一个前端开发中常见的工具集合，包含了一系列常用的工具函数和插件，以方便开发者进行项目开发。 安装 --- ------- ------------ ------使用 ...

    4 年前
  • npm 包 todocli-oclif 使用教程

    在前端开发过程中，我们经常需要对项目进行一些文档管理和项目计划方面的管理，而 todocli-oclif 就是一款方便好用的 npm 包，它可以帮助我们快速实现 ToDo 列表的管理和命令行操作。

    4 年前
  • npm 包 sknode 使用教程

    前端开发中，会用到很多 npm 包。其中一个非常实用的包就是 sknode。sknode 是一个基于 Node.js 的 WebSocket 服务器和客户端，可以方便地创建实时应用程序，如聊天应用程序...

    4 年前
  • npm 包 vue2-cui 使用教程

    前言 在前端开发中，使用一些常用的组件库可以极大地提高我们的开发效率，同时也使我们的应用更加美观和强大。而 vue2-cui 是一个基于 Vue.js 的 UI 组件库，提供了多种常用组件，如按钮、输...

    4 年前
  • npm 包 quotes-go 使用教程

    简介 在日常前端开发中，我们经常需要一些随机语句或者句子来做一些测试或者展示，这个时候，一个好用的 npm 包 quotes-go 就应运而生了。它可以为我们提供各种主题的句子以及语录，可以说是非常的...

    4 年前
  • npm 包 vue3-cui 使用教程

    介绍 vue3-cui 是一款基于 Vue3 的 UI 组件库，提供了多种常用的 UI 组件，如按钮、输入框、下拉框、标签、表格等。它的设计理念是简洁、高效、易用，适用于大多数前端项目的开发需要。

    4 年前

相关推荐

    暂无文章