npm 包 redux-promise-axios 使用教程

在前端开发中，请求后端数据是必不可少的一项工作。redux-promise-axios 是一个非常方便的 npm 包，可以帮助我们更加简单地处理异步请求。

安装

可以使用 npm 进行安装：

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

基础使用

redux-promise-axios 实际是对 axios 进行了一层封装，使其支持 Promise。

我们在 redux 中的使用方式类似于这样：

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

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

在我们的 Action 中，我们可以简单地传入一个 Promise：

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

在 reducer 中，我们可以通过判断 action 中 type 的方式，处理返回结果：

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

高级使用

可以通过配置来对 redux-promise-axios 进行更加大量的定制。

设置请求前缀

可以通过配置来设置请求的前缀，例如：

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

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

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

处理请求失败

可以通过配置 returnRejectedPromiseOnError 选项来实现对请求失败的处理。

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

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

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

这里值得特别注意的是，如果你希望使用 returnRejectedPromiseOnError 来处理请求失败，那么在 reducer 中对于错误的处理，需要给出一个默认的返回值，例如：

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

设置请求拦截器

可以通过配置来设置请求拦截器，例如：

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

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

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

我们可以在请求 interceptor 中做一些事情，例如设置请求头，对请求的数据进行处理等等。

设置响应拦截器

可以通过配置来设置响应拦截器，例如：

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

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

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

响应拦截器拦截到响应之后，我们可以根据返回结果来做进一步处理，例如未授权的处理、错误处理等等。

示例代码

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

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

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

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

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

以上就是对 redux-promise-axios 的使用教程，希望对你有所帮助。

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

阅读全文

猜你喜欢

  • npm 包 webot-debug 使用教程

    简介 在前端开发过程中，可能会使用一些自动化工具或框架来辅助开发。而开发过程中面临的问题也需要有一定的调试手段。今天我们将介绍使用 npm 包 webot-debug 来辅助前端调试的方法。

    4 年前
  • 使用 npm 包 webot-meiva

    在前端开发中，我们经常需要使用一些 JavaScript 库或框架以快速完成某些特定的任务。而 npm 则是一个很好的工具，用于管理和共享这些开源的 JavaScript 包。

    4 年前
  • NPM 包 webpack-lean 使用教程

    什么是 webpack-lean webpack-lean 是一个基于 webpack 的简化封装工具，用于快速构建前端应用的打包工具。它具有以下特点： 快速：能够快速构建简单项目的打包任务。

    4 年前
  • npm 包 webpack-libify 使用教程

    介绍 webpack-libify 是一个基于 webpack 的库构建工具，可以将您的 JavaScript 库转换为符合 CommonJS、AMD 或 UMD 规范的包。

    4 年前
  • npm 包 webpack-licenses-plugin 使用教程

    在前端开发中，借助现有的开源工具能够有效提高工作效率。webpack-licenses-plugin 就是一款值得推荐的 npm 插件，该插件可用于生成第三方开源组件的使用证书，方便开发者审核使用情况...

    4 年前
  • npm 包 webpack-link 使用教程

    webpack-link 是一个方便的 npm 包，可用于在开发过程中在模块之间创建链接，从而提高模块化的开发效率。在前端开发中，使用 webpack 是非常普遍的，因此掌握如何使用 webpack-...

    4 年前
  • npm 包 webpack-listener 使用教程

    前言 在前端开发中，我们经常使用 webpack 打包工具进行模块化开发，而在开发过程中，我们需要及时了解到每一个模块打包后的状态，包括是否成功打包、打包大小等等。

    4 年前
  • npm包 webpack-livereload-plugin-css 使用教程

    前言 在前端开发中，我们经常需要实时预览代码的效果来调试。为了方便开发者在开发过程中实时查看运行效果，webpack提供了一个livereload插件，可以自动刷新浏览器，以便开发者在保存代码后可以看...

    4 年前
  • npm 包 webrouter-location-origin 使用教程

    在前端开发中，使用路由系统是一项必不可少的功能。npm 包 webrouter-location-origin 则是一个可以帮助我们控制路由系统的工具。本文将介绍如何使用 npm 包 webroute...

    4 年前
  • npm 包 webrpc 使用教程

    WebRPC 是一个开源的通用 RPC 框架，提供跨语言和跨平台的数据传输和服务调用功能。通过 WebRPC，我们可以在前端和后端之间传递数据，实现不同应用之间的无缝交互。

    4 年前
  • npm 包 webrpc.js 使用教程

    近年来，Web前端技术快速发展，越来越多的开发者开始关注跨平台框架的开发。webrpc.js 就是其中一款不错的选择，它是一个基于 WebRTC 的高效、可靠、安全的 RPC 框架，使用简便，易于学习...

    4 年前
  • npm 包 webrtc 使用教程

    随着 Web 技术的不断发展，实时音视频通信正在逐渐成为互联网应用的常见需求。WebRTC 技术为实现这一需求提供了很好的解决方案。webrtc 是一个 npm 包，它提供了一个简单易用的 API，方...

    4 年前
  • npm 包 webrtc-chord 使用教程 - 构建实时 web 应用

    介绍 WebRTC 是一个可以通过浏览器实现快速建立实时通信的技术。webrtc-chord 是一个基于 WebRTC 的开源 JavaScript 库，能够帮助我们构建实时 web 应用，提供去中心...

    4 年前
  • npm 包 webrobber 使用教程

    webrobber 是一个前端爬虫库，提供了多种爬取网页数据的功能。通过 npm 包的形式，可以方便地部署到项目中，快速爬取需要的数据。本文将介绍 webrobber 的基本用法，以及一些高级用法和实...

    4 年前
  • npm 包 webrobot 使用教程

    如果您正在寻找一种快捷有效的方式来自动化提交 web 表单或者模拟人类在 web 页面上的操作，那么 webrobot 是一个值得推荐的工具。它是一种能够进行浏览器自动化测试的 Node.js 模块，...

    4 年前
  • npm 包 webot 使用教程

    前言 如果你是一名前端开发者，相信你一定对于 web 开发非常关注。而在 web 开发中，聊到自动回复机器人，有可能第一个想到的就是微信公众号了。但是，怎样在使用公众号的情况下方便地实现自动回复呢？这...

    4 年前
  • npm 包 webpack-journal 使用教程

    什么是 webpack-journal webpack-journal 是一个 webpack 插件，可以将 webpack 构建的过程和结果输出到控制台。 安装 使用 npm 安装 --- ----...

    4 年前
  • npm 包 webrtc-chord-uuid 使用教程

    前言 随着 p2p 技术的不断发展，webrtc 成为了前端开发者的一项重要技术。然而，webrtc 在使用时会遇到分布式数据结构的问题，chord 算法是一种常用的解决方案。

    4 年前
  • npm 包 webshot-phantom2 使用教程

    简介 webshot-phantom2 是一个基于 PhantomJS 的 Node.js 模块，可以将网页截图保存为图片，方便用于页面预览和测试。其具有以下特点： 支持包括网页完整滚动截图在内的多...

    4 年前
  • npm 包 webshot-with-logs 使用教程

    在前端开发中，有时候需要将某个网页转化为图片格式，以备后续使用。这时候，我们通常可以通过使用 npm 包 webshot-with-logs 来实现这个功能。本篇文章将详细介绍这个 npm 包的使用教...

    4 年前

相关推荐

    暂无文章