前言
在 Web 开发中，前端工程师几乎每天都离不开网络请求，而表单提交（form request）是前端开发中需要的基础功能之一。为了提高表单提交的效率，有许多 npm 包提供了各种表单提交的封装和优化。本篇文章将介绍一个 npm 包 form-request 的使用教程，让大家能够更简单、高效地实现表单提交功能。
form-request 简介
form-request 是一款基于 Promise 和 XMLHttpRequest 封装的表单提交工具。它具有以下特点：
- 封装了 XMLHttpRequest，通过 Promise 机制实现了异步请求
- 支持 get、post 等请求方式
- 支持自定义请求头、表单字段等信息
- 支持自定义数据格式：JSON、formdata、urlencoded 等
- 支持全局的请求拦截器、响应拦截器等
安装
可以通过 npm 或者 yarn 安装 form-request：
npm install form-request --save
或者
yarn add form-request
使用
使用 form-request 很简单，只需要按照以下步骤即可：
1. 引入
import request from 'form-request';
2. 设置请求拦截器
可以设置全局的请求拦截器，对所有请求进行拦截和处理，比如添加请求头、token 等：
-- -------------------- ---- -------
--------------------------------------- -- -
-- -----------
-- --------------------------------- -
---------------------------- - ------- - - --------------------------------
-
------ -------
-- ----- -- -
-- ------
---------------------
---3. 发送请求
3.1 post 请求
request.post('/api/login', {
username: 'admin',
password: 'admin'
}).then(res => {
console.log(res);
}).catch(error => {
console.error(error);
});3.2 get 请求
-- -------------------- ---- -------
------------------------ -
------- -
--- -
-
----------- -- -
-----------------
-------------- -- -
---------------------
---4. 设置响应拦截器
可以设置全局的响应拦截器，对所有响应进行拦截和处理，比如统一处理错误信息、对返回数据进行加工等：
-- -------------------- ---- -------
------------------------------------------ -- -
-- ---------
-- ---------------- --- --- -- ------------------ --- -- -
------ --------------
- ---- -
----- ------- - --------------------- -- --------
------ ----------------
----- -------------------
-------
---
-
-- ----- -- -
-- ------
---------------------
---高级用法
请求取消
在实际场景中，可能会遇到用户在请求过程中取消请求的情况。form-request 也提供了请求取消拦截器的支持，以便更好地对请求进行控制：
-- -------------------- ---- -------
-- ------
----- --------------- - -----------------
-- -------
----------------------------------------------- -- -
-- -----------
-- --------------------------------- -
---------------------------- - ------- - - --------------------------------
-
------ -------
-- ----- -- -
-- ------
---------------------
---
-- -------
-------------------------------------------------- -- -
-- ---------
-- ---------------- --- --- -- ------------------ --- -- -
------ --------------
- ---- -
----- ------- - --------------------- -- --------
------ ----------------
----- -------------------
-------
---
-
-- ----- -- -
-- ------
---------------------
---
-- ----
----- ------- - --------------------------------------- -
--------- --------
--------- -------
---
-- ----
-----------------并行请求
有时候我们需要同时发送多个请求并等待它们全部响应后再进行下一步操作，此时，Promise.all() 可以满足我们这一需求。我们可以将需要发送的请求放入一个数组中，传入 Promise.all() 中：
-- -------------------- ---- -------
-------------
------------------------ -
------- -
--- -
-
---
------------------------ -
------- -
--- -
-
--
----------- -- -
------------------- --------
-------------- -- -
---------------------
---总结
form-request 是一个十分实用的表单提交工具，具有强大的自定义能力和高并发支持。使用者只需要按照提供的 API 调用，即可以完成表单提交。同时，全局拦截器的支持，让我们可以更好地控制请求和响应，提高开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562da81e8991b448e03b5