使用 ES7 Decorator 封装 Axios
在前端开发中，Axios 是非常常见并且好用的 HTTP 请求库，它提供了强大的功能和易于使用的 API。然而，当我们在多个模块或组件中使用时，需要重复配置一些相同的选项，这会导致代码冗余和难以维护。为了解决这个问题，我们可以使用 ES7 的 Decorator（修饰器）来封装 Axios。
什么是 Decorator
Decorator 是 ES7 中引入的一种语法特性，它可以用来修改类或方法的行为。通过定义一个装饰器函数，并将其应用到目标类或方法上，我们可以在不修改原代码的情况下添加新的功能或者修改原有的功能。
在本文中，我们将使用 Decorator 来封装 Axios，实现统一的请求配置和拦截处理。
实现思路
首先我们需要定义一个装饰器函数 request，它接受一个参数 target，这个参数是我们要修饰的目标对象，可能是一个类或者一个对象。然后在装饰器函数内部，我们可以利用 Axios 提供的 create 方法创建一个新的 Axios 实例，并设置默认的请求配置和拦截器处理。
------ ----- ---- --------
-------- --------------- -
----- -------- - --------------
-------- --------------------------
-------- ------
---
---------------------------------------- -- -
-- -----------
------ -------
-- ----- -- -
-- ---------
------ ----------------------
---
------------------------------------------- -- -
-- ---------
------ ---------
-- ----- -- -
-- ---------
------ ----------------------
---
------------ - ---------
-接下来我们可以在需要使用 Axios 的模块或组件上应用这个装饰器函数，例如：
--------
----- ----------- ------- --------------- -
------------------- -
-------------------------------------- -- -
---------------------------
-------------- -- -
---------------------
---
-
-------- -
------ -----
-
-在这个示例中，我们使用了装饰器语法 @request 来修饰 MyComponent，并且通过 $http 属性来访问封装后的 Axios 实例。
深入理解
使用 Decorator 封装 Axios 的好处是显而易见的，但是在了解实现细节之前，我们需要先了解一些基础知识，包括 Axios 的请求配置和拦截器处理。
请求配置
Axios 的请求配置包括以下几个选项：
- baseURL：请求的基础 URL，可以通过设置全局默认值或者每个请求单独设置；
- headers：请求头，可以设置 Authorization、Content-Type 等；
- params：URL 中的查询参数；
- data：请求体中的数据；
- timeout：请求超时时间，单位为毫秒。
还有一些其它选项，可以参考 Axios 文档进行了解。
拦截器处理
Axios 的拦截器可以在发送请求或者接收响应之前对它们进行处理。例如，我们可以在请求发送前添加一个认证 token，或者在响应接收后对返回的错误信息进行统一处理。
Axios 提供了两种拦截器：请求拦截器和响应拦截器。每种拦截器都包括两个回调函数，一个用来处理成功情况，一个用来处理失败情况。这些回调函数接受的参数是请求配置对象或者响应对象，可以对它们进行修改或者返回一个新
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/38128