前言
在前端开发中，经常需要使用 Ajax 进行异步请求。尽管现在浏览器支持 Fetch API 和 XmlHttpRequest，但在一些旧的浏览器中，ajax 仍然是很流行的做法。在开发中，我们也需要使用一些现成的封装好的 Ajax 库，比如 jQuery 的 $.ajax、axios、fetch 等等。而今天我们来介绍一下一个不太常用但也很实用的 Ajax 库 npm 包 metal-ajax。
metal-ajax 简介
metal-ajax 是用于处理 Ajax 请求的小型 JavaScript 库。与其他常用库类似，它提供了一组友好 API，方便开发者进行 HTTP 请求。它支持 Promise，FormData，JSON 数据请求等等，同时也可以轻松地与其它的第三方库集成。Metal-ajax 通过 HttpAdapter 发送请求。目前支持 XMLHttpRequest 适配器和 Node.js HTTP 适配器支持。这使得它可以用于 Node.js 和浏览器两种环境。
安装
在使用 metal-ajax 之前，需要先在项目依赖中安装该库。
--- ------- ---------- ------
在安装完成后，就可以使用 metal-ajax 了。
使用
普通写法
使用最简单的方法是通过 metal-ajax 对象的 .request() 方法进行 Ajax 请求，并将 Ajax 配置参数传递给该方法。常见的 Ajax 请求参数有 method，url，data，headers 和 timeout 等。
--- --------- - ----------------------
-------------------
------- ------
---- --------
----- -
--- ---
--
-------- -
------------------- ----------------
-
-------------------------- -
----------------------
------------------------ -
-------------------
---我们也可以通过实例化 metal-ajax 类来使用 metal-ajax 库，如下所示：
--- ----------------- - --- ------------
---------------------------
------- ------
---- --------
----- -
--- ---
--
-------- -
------------------- ----------------
-
-------------------------- -
----------------------
------------------------ -
-------------------
---常用方法
.get(url, [config])
通过 GET 请求获取指定路径的数据。
---------------------------------------------- - ---------------------- ------------------------ - ------------------- ---
.post(url, [data], [config])
通过 POST 请求向指定路径发送数据。
----------------------- - ----- ------- ---- -- -------------------------- - ---------------------- ------------------------ - ------------------- ---
.put(url, [data], [config])
通过 PUT 请求向指定路径更新数据。
---------------------- - --- ---- ----- ------- ---- -- -------------------------- - ---------------------- ------------------------ - ------------------- ---
.delete(url, [config])
通过 DELETE 请求删除指定路径的数据。
-------------------------------------------------------- - ---------------------- ------------------------ - ------------------- ---
.request(config)
使用最广泛的方法是通过 request 方法进行 Ajax 请求，并将 Ajax 配置参数传递给该方法。
-------------------
------- ------
---- --------
----- -
--- ---
--
-------- -
------------------- ----------------
-
-------------------------- -
----------------------
------------------------ -
-------------------
---.setDefaultConfig(config)
我们可以使用 .setDefaultConfig 来设置请求的默认配置，该设置将在每个请求中都自动包含，方便统一管理。
----------------------------
-------- -
------------------- ----------------
--
-------- ----
---
---------------------- -
----- -
--- ---
-
-------------------------- -
----------------------
------------------------ -
-------------------
---这将默认包含请求头部 X-Requested-With，并设置请求超时时间为 5s。
全局设置
提供一个可配置的默认的全局 Ajax 设置及表现、错误、超时处理的钩子函数。
首先，引入 metal-ajax-hooks：
--- -------------- - ----------------------------
设置全局设置：
--------------------------- -------- ----------------------- ---
全局表现处理函数：
----------------------------------------- -------- - -- ------------- ------------------ ------- ------- --- ---------------------------------------- ----- - -- ------- ------------------ ---- ---- ---
全局错误处理函数：
--------------------------------------- ------- --------- - ------------------ ------- ------- ---------------- ---
全局超时处理函数：
----------------------------------------- -------- - ---------------------- ------- ---
结语
通过学习使用 npm 包 metal-ajax，我们可以更方便地进行异步请求，并且该库支持的场景较多，使用起来也很简单。对于一些轻量级的项目，使用 metal-ajax 同样可以达到良好的效果。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/66373