前言
在 Web 前端开发中，我们经常需要使用 AJAX 或 Fetch 等技术实现数据请求。而使用 XMLHttpRequest 无疑是一种老旧的方式，Fetch API 作为替代品，其优雅的 API 设计和 Promise 风格的异步处理方式使得其成为了大家开发中的首选。
esky-fetch 是一个使用 Promise 封装了 Fetch API 的 npm 包，它具有更加简洁的 API 设计，让你在应对各种复杂场景时能够更加得心应手。
本篇文章将介绍 esky-fetch 的使用方式，包括安装和基本用法，并提供详细的示例说明。
安装
你可以使用 npm 或 yarn 来安装 esky-fetch，通过如下命令安装 esky-fetch：
npm install esky-fetch # or yarn add esky-fetch
基本用法
通过 fetch() 发送 GET 请求
import fetch from 'esky-fetch';
fetch('http://example.com/api/data')
.then(res => res.json())
.then(data => console.log(data))
.catch(error => console.error(error));通过 fetch() 发送 POST 请求
-- -------------------- ---- -------
------ ----- ---- -------------
----- ---- - -
--------- -------
--------- --------
--
------------------------------------- -
------- -------
-------- -
--------------- ------------------
--
----- --------------------
--
--------- -- -----------
---------- -- ------------------
------------ -- ----------------------通过 fetch() 发送 PUT 请求
-- -------------------- ---- -------
------ ----- ---- -------------
----- ---- - -
--- --
--------- ---------------
--------- --------------
--
----------------------------------------------- -
------- ------
-------- -
--------------- ------------------
--
----- --------------------
--
--------- -- -----------
---------- -- ------------------
------------ -- ----------------------通过 fetch() 发送 DELETE 请求
-- -------------------- ---- ------- ------ ----- ---- ------------- ----- ---- - - --- - -- ----------------------------------------------- - ------- --------- -- --------- -- ----------- ---------- -- ------------------ ------------ -- ----------------------
拓展用法
esky-fetch 除了支持基本使用方式外，还提供了一些拓展用法，下面列举了其中三种常用的拓展用法。
1. 配置超时时间和请求取消
-- -------------------- ---- -------
------ ----- ---- -------------
----- ---------- - --- ------------------
----- ------ - ------------------
----- -------------- - --- ----------------- ------- -- -
------------- -- -
-------------------
---------- -------------- ---------
-- ------
---
--------------
------------------------------------ -
------
----------- -- ------------
--------------
--
---------- -- ------------------
------------ -- ----------------------2. 配置请求拦截器和响应拦截器
-- -------------------- ---- -------
------ ----- ---- -------------
------------------------------------- -- -
-- ----- ------ -------------
------------------------------- - ------- -------
------ -------
-- ----- -- -
-- ----------------
---------------------
------ ----------------------
---
---------------------------------------- -- -
-- ----- -------- ---------------
-- ---------------- --- ---- -
----------------------------
-
------ ---------
-- ----- -- -
-- ----------------
---------------------
------ ----------------------
---
------------------------------------
--------- -- -----------
---------- -- ------------------
------------ -- ----------------------3. 配置多个 baseURL
-- -------------------- ---- ------- ------ ----- ---- ------------- ----- -------- - - ---- ------------------------- ----- ------------------------- -- ------------------------------- -- ------ ------- ------------------------------------ --------- -- ----------- ---------- -- ------------------ ------------ -- ---------------------- -------------------------------- -- ------ ------- ------------------------------------ --------- -- ----------- ---------- -- ------------------ ------------ -- ----------------------
结语
esky-fetch 在封装 Fetch API 的基础上，为开发者提供了更加简洁、易用的 API 设计，以及拓展用法，可以极大地提高开发效率。本篇文章详细地介绍了 esky-fetch 的使用方式，并提供了实用的示例代码，希望可以对读者在实际应用中有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055fc081e8991b448dd0d2