前言
在前端开发中，经常需要使用 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 之前，需要先在项目依赖中安装该库。
npm install metal-ajax --save
在安装完成后，就可以使用 metal-ajax 了。
使用
普通写法
使用最简单的方法是通过 metal-ajax 对象的 .request() 方法进行 Ajax 请求，并将 Ajax 配置参数传递给该方法。常见的 Ajax 请求参数有 method，url，data，headers 和 timeout 等。
-- -------------------- ---- -------
--- --------- - ----------------------
-------------------
------- ------
---- --------
----- -
--- ---
--
-------- -
------------------- ----------------
-
-------------------------- -
----------------------
------------------------ -
-------------------
---我们也可以通过实例化 metal-ajax 类来使用 metal-ajax 库，如下所示：
-- -------------------- ---- -------
--- ----------------- - --- ------------
---------------------------
------- ------
---- --------
----- -
--- ---
--
-------- -
------------------- ----------------
-
-------------------------- -
----------------------
------------------------ -
-------------------
---常用方法
.get(url, [config])
通过 GET 请求获取指定路径的数据。
metalAjax.get('/user').then(function(response) {
console.log(response);
}).catch(function(error) {
console.log(error);
});.post(url, [data], [config])
通过 POST 请求向指定路径发送数据。
metalAjax.post('/user', {
name: 'John',
age: 22
}).then(function(response) {
console.log(response);
}).catch(function(error) {
console.log(error);
});.put(url, [data], [config])
通过 PUT 请求向指定路径更新数据。
-- -------------------- ---- ------- ---------------------- - --- ---- ----- ------- ---- -- -------------------------- - ---------------------- ------------------------ - ------------------- ---
.delete(url, [config])
通过 DELETE 请求删除指定路径的数据。
metalAjax.delete('/user?id=123').then(function(response) {
console.log(response);
}).catch(function(error) {
console.log(error);
});.request(config)
使用最广泛的方法是通过 request 方法进行 Ajax 请求，并将 Ajax 配置参数传递给该方法。
-- -------------------- ---- -------
-------------------
------- ------
---- --------
----- -
--- ---
--
-------- -
------------------- ----------------
-
-------------------------- -
----------------------
------------------------ -
-------------------
---.setDefaultConfig(config)
我们可以使用 .setDefaultConfig 来设置请求的默认配置，该设置将在每个请求中都自动包含，方便统一管理。
-- -------------------- ---- -------
----------------------------
-------- -
------------------- ----------------
--
-------- ----
---
---------------------- -
----- -
--- ---
-
-------------------------- -
----------------------
------------------------ -
-------------------
---这将默认包含请求头部 X-Requested-With，并设置请求超时时间为 5s。
全局设置
提供一个可配置的默认的全局 Ajax 设置及表现、错误、超时处理的钩子函数。
首先，引入 metal-ajax-hooks：
var metalAjaxHooks = require('metal-ajax-hooks');设置全局设置：
metalAjaxHooks.setConfigs({
baseUrl: "http://localhost:8080"
});全局表现处理函数：
-- -------------------- ---- ------- ----------------------------------------- -------- - -- ------------- ------------------ ------- ------- --- ---------------------------------------- ----- - -- ------- ------------------ ---- ---- ---
全局错误处理函数：
metalAjaxHooks.setErrorHandler(function (error, rejectFn) {
console.log('api请求 error', error);
rejectFn(error);
});全局超时处理函数：
metalAjaxHooks.setTimeoutHandler(function (config) {
console.log('api请求超时', config)
});结语
通过学习使用 npm 包 metal-ajax，我们可以更方便地进行异步请求，并且该库支持的场景较多，使用起来也很简单。对于一些轻量级的项目，使用 metal-ajax 同样可以达到良好的效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66373