前言
在使用 Taro 开发小程序时，有时候需要在编写页面时直接调用一些 API 获取数据，然后再将数据展示到页面上。然而直接在页面中使用原生 API 并不好维护，而且代码可读性较差，这时候可以使用 babel-plugin-transform-taroapi 将需要调用的 API 封装成函数，以便直接在页面中调用函数获取数据。
安装
在项目根目录下执行以下命令安装 babel-plugin-transform-taroapi：
npm install babel-plugin-transform-taroapi --save-dev
配置
在项目根目录下找到 babel.config.js 文件，如果不存在则创建。在其中加入以下代码：
-- -------------------- ---- -------
----- ------- - ---
-- --------------------- --- -------- -
--------------
--------------------
-
------- ----------------------- ------ -------
---------- -------
----------- ---------------------
-
---
-
-------------- - -
-------- -
---
--
-------- -------
-这里加了一个判断环境变量的条件 process.env.TARO_ENV === 'weapp'，表示只将 weapp 环境下的 API 封装。如果是其他环境（如 h5、rn 等），则不需要执行该插件。
在这个插件的配置项中，有三个属性：
apiSrc：表示存放 API 代码的目录路径，注意是相对于项目根目录的路径；importSrc：表示在页面中引入 API 的模块名；serviceUrl：表示请求 API 时的域名部分。
有了以上的配置，就可以开始编写 API 代码了。
编写 API 代码
在 apiSrc 目录下创建一个 get_user_info.js 文件，输入以下代码：
-- -------------------- ---- -------
------ ---- ---- ---------------
------ ----- ---- --------------
------ ----- -------- ------------------- -
----- --- - ----- ----------------- ----------
-- ---- -- -------- --- -- -
------ ---------
- ---- -
----------------
------ -----------
----- ------
---
------ -----
-
-这里以获取用户信息为例，使用了 Taro 封装的 get 方法请求 /user/info 接口，然后根据返回值判断并返回数据或者在页面中提示错误信息。
在页面中使用
通过以上配置和编写代码，现在可以在页面中引入 getUserInfo 函数，直接调用该函数获取数据。
在页面的顶部引入 @api 模块：
import {getUserInfo} from '@api';在页面的某个方法中调用 getUserInfo 函数：
async getUser(userId) {
const userInfo = await getUserInfo(userId);
// do something with userInfo
}至此，在页面中成功使用了已封装的 API 函数。
总结
使用 babel-plugin-transform-taroapi，可以将调用 API 的代码封装成函数，从而提高页面代码的可读性以及维护性。希望本文能够帮助读者更好地使用 Taro 进行小程序开发。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/babel-plugin-transform-taroapi