5-api的请求封装原创

Hello，同学们，我是童阳老师，然后呢，这节课我来先跟大家讲解一下，我们在小程序开发的一开始的时候，我们先做的一个很重要的准备工作就是API的封装，我们先先了解一下为什么要对API进行封装呢？首先我们先在我们的配置里面新建的页面，这个页面叫test。啊，小程序当中新建页面的方式为，在配置页面当中点击右键新建一个文件夹叫test。啊，这个文件夹是为了方便我们做测试使用的，然后我们点击右键再新建一个页面叫test。然后呢，这时候你看到里面就会有四个文件生成了哈，这是小程序当中原生开发当中创建页面的方式，然后呢，为了让我们程序一开始打开之后去接进入到这一个test当中呢，我们需要在我们的app.js这里面。我们先关掉，我们一开始有一个登录的一个判断。

然后在这个地方我会有一个如果用户判断用户是否存在不存在，会跳到一个登录界面当中，然后呢，我们先在这里面暂时的先把这个跳转的代码先暂时的注释掉线啊，不然我们就测试不到这接口了，它会一开始进来的时候直接跳转到登录页面了。然后呢，这时候我们再打开我们的APP。然后呢，就如同我之前在部署所讲解的同学们，我们在新建好一个页面当中，在AP当中就会添加了我们新加进来的这个页面，然后呢，我们在这个页面当中把它挪到第一位，就是首页了，因为一开始默认的时候就会以打开它为准。然后呢，这里面注意了什么？因为这个文件是个标准的，就是零件说我们这个数组当中最后一个成员是不能有逗号结尾的。好，同学们看到吗？这时候就进入到了这个test页面了，然后我们打开我们的test页面当中的逻辑部分。

然后呢，我们在这里面我们写上一个函数啊，先把这里面多余的一些它自己生成的一些友好的提示的钩子，我们先去掉先。然后这里写上一个函数，叫啊，Get。System info。然后呢，这里面我在的地方，我去执行这个函数。同学们可以看到这个lolo表示么？在我们整个页面。加载完成之后就会触发的一个函数，而我在函数里面调用了我这内部的另外一个函数。然后我把这些注释暂时去掉了。然后呢，同学们都众所周知，我们小程序是只是一个客户端，我们需要得到数据和跟服务端进行交互的时候，必须得发送阿贾克请求，而这个时候呢，我们官方提供的工具有两个，一个是什么方式呢？一个是用传统的叫。

微信点request方法。这样只能发送的请求啊，这是我们传统的开发模式，但现在我们采用的什么是云托管的模式，云托管是为了方便我们能在我们的请求。的方式当中，携带一些重要的小程序当中过往需要很复杂的流程才能得到的一些健全信息，比如说我们用户的信息，特别是一个最重要的open ID，而在通过了云托管的模式部署我们的应用的时候呢，我们可以很方便的得到这些以前需要很多步骤才能得到信息，但是他的请求方式也发生了一定改变。

需要呢？这里调用一个什么叫微信cloud里面暴露的一个API，我们用什么Co container的方法来发送请求，其中呢，这里面的方式我们要注重几个点，他跟我们的微信的request发送请求是非常相似的，只是多了几步，第一，它多了一个conflict，需要我们在里面配置一个我们的环境ID，这个环境ID在哪里获得呢？打开我们的。原来的微信云托管当中，找到我们的右上角会有个地方叫环境prod，这个地方呢，会看到我们有一个我的环境，其中这里面就有个我的环境ID，这时候点击这个标，点击就可以复制到粘剪贴板当中，然后呢我们去到我们的项目当中进行粘贴。这是第一个地方啊，第二个地方呢，我们需要什么，需要在我们的head当中X微信server，然后这里面输入什么，输入的是我们的这一个服务列表当中的这个服务的名称，比如说我这里的服务名称是YN，然后这里面就输入Y。

而其他请求当中还有一个区别就是什么？我们这里的请求路径是pass。而在我们的以往的项目当中，这个请求的链接是什么？是URL，就是微信的new当中，他用什么用的是URL。啊，这是一个很主要的区别，它的请求路径为这个地方啊，所以这里面我输入我们的请求路径APIV1，然后呢，我们这里面就是用了一个我的项目当中最基本的一个请求参数叫什么呢？叫做获取系统信息。我们这个请求链接就是到这个链接，然后你会看到其他的参数，基本上跟微信的request是保持一致的，其中包括什么？包括如果你请求当中发送的参数。

啊，但是这里我没有这个接口，是不不用传参的啊，但如果你有对应的参数，你可以这里发送，还有一个叫请求方式。啊，默认有get post几个请求。啊，我现在这个接口就是破请求的，然后呢，也会有什么有成功和失败的回调，如果请求成功的时候，就会执行一个回调函数。如果有失败的话，就会执行一个失败回调。无论成功还是失败。就会举行一个。

完成的回调，这三个回调函数以及传参的形式都是跟我们的微信的request保持一致的啊，同学们一般而言，我们的开发过程当中就会写一个请求，就是你看到现在这样子结构，然后这里面呢，我们一般会把我暂时这里面先只是把结果说出来给大家看一下。啊，如果有错误的话，我们就输出错误。然后这里我们看rock，一个完成。好，同学们，我们打开调试，看一下现在的结果。清空，然后我点击再重新的点一下。编译。然后同学们看一下，这里就执行到了这个请求。

啊，然后看到里面就会得到吗？得到对应的一些信息啊，但我也可以看这里。这就会得到test当中啊，打印出来的这个信息。OK，这是请求的方式啊，我们暂时先不用管返回的内容，同学们，这里面我的接口是如果是系于处的话，就表示返回成功的啊，重点我们看一下孩子们，现在我们发送的请求的代码当中，其实有很多部分是相同的，比如说以上你们看到的这个部分的内容。还有什么？还有我们对于失敬。对于请求成功之后的回到的内容的处理都是一致的，包括我们路径有一部分的前缀是一致的，所以这个时候呢，我们会看，如果每一次发送请求都需要那么长的代码来处理的话，那么其实是非常不方便的说这个时候呢，我们需要什么对这样的请求方式进行一个二次封装，虽然官方提供了这个方法。但是我们并不适合我们的开发，我们需要怎么进行一定的调整，所以这时候呢，我们需要怎么去处理呢？我们打开项目当中跟目录下面的unit这个目录，目录当中会有个api.js。

来同学们，我们看到这个地方来看一下这个地方呢，我们对于我们官方的API进行了一个更完善的一个的一个封装，啊，我们具体封装了哪些内容呢？同学们先打开。第一个request函数。在这函数当中呢，我们用了一个promise的语法，便于什么？便于我们之后在调用它的时候可以使用吗？可以使用一个。在外面把它变成一次函数，里面用什么用O的结构啊，把这种回调操作写的更加直观，避免什么，避免了一些我们的回掉地域的形成。啊，就想以这样的形式来形成代码啊，每一行一个内容啊，不需要过多的嵌套回调，这个是一种好处，然后呢，我们看看另外一个好处，什么东西呢？我们把一些公共的配置部分，比如说我们这里做什么事情呢？我们这个请求当中接受两个参数，一个是你请求的URL啊，对应的配置信息，我根据这URL呢，我会对接什么，对接一些pass当中，我会进行一个封装，因为我们分析了我们的请求路径当中有一部分是一样的。

你只要把传入不一样的那一部分就可以了。然后呢，我在这里面我也统一部署了我的conflict当中对于env的这里的部署，所以同学们，你们在运行我们这个项目当中，你也要记得去替换在首页的。Unit。JS里面的api.js这个地方找到吗？找到env进行替换它的环境ID啊，这里面我不用替换，因为就是我现在项目运行，运行项目里面对应的。环境ID，然后呢，往下这地方我们看到配置项当中，我们有个option的对象，我们需要用户配置哪些东西呢？我们需要他配置请求的方式。

以及用户请求发送的数据。然后呢，这里面呢，我们会有一个东西，我们会有一个对应的一个cookie的操作啊，但这个操作后面再讲，讲到我们那个短信收发的时候，会说清楚为什么我们这里面会封装和cookie，而且为什么要进行封装，然后呢，这个就是我们在微服务当中啊。要设置的一个服务名。啊，因为在我们的项目已经推托管到我们的这个。微信的云托管平台了，然后呢，第三个是么？我们会根据用户配置项当中的一个一个配置来判断你是使用Jason的形式来传递参数呢，还是用我们的phone unode ennk code的形式来传递参数啊，就是我们对于传参的类型的一个配置交给用户去决定。然后呢，接下来会有我们对应的一个success和和complete，但complete当中我们没有做任何事情。目前我们如果你成功了，我们就返回整个promiseor的回调。

如果你失败了呢？我们会执行这里file当中的错误的信息进行一个处理，让你在外面能捕获到对应的错误信息。OK，这是一个公用函数的一个。封装，但是呢，我们不会直接使用到这个request，我们会还做什么事呢？我们进一步的对这个方法进行封装，让用户使用时候更加简便。我们封装了什么？我们封装了一个POS的方法。在POS方法里面呢，我们怎么样呢？我们还是直接返回了这一个函数，执行的结果实际上也是返回这个promise，但是这里面呢，我们会对这样的请求参数进行一定的处理，比如说只要你是POS请求，那方法肯定就是指定POS了，用户不用再传进来了，因为当你调用了POS方法的时候，就默认帮你使用MOS来进行什么post这个参数传递到我们刚刚声明的request函数当中进行。调用这个请求，然后呢，Date当中你只需要配置一些主要的配置项就可以了。

然后呢，这个it's我说false，这样子决定了吗？决定了我这里的请求类型。内容格式是什么，就使用到了后面的这一个。方urq的这样的形式来进行传参。然后呢，这个方式就决定什么，用户传的方式就很简单了，他只要决定一个请求链接和请求传递的参数就可以使用了。这样子就是它的最大的好处，而下面我们又封装了一个post object，其实跟post请求差不多，唯独就是什么，两者当中由于这一个参数不同，所以说他请求时候对应的内容格式会有消息变化，一个什么一个是Jason，一个什么一个是。Phone ul a的。其实对于我们的pass服当中两者的船舱。最终得到的数据是是有区别的，但是如果你传递参数一定是一个JS的形式，标准的格式的追的话，还是使用什么使用追的形式来进行传参。

然后呢，我们往下的地方再看，我们也封装了对应的封装了一个get请求，其实也是我们指定的一个方法，为get请求比较传递对应的参数可以了，也只是封装了一个的请求，对应的是我们delete的请求，封一个破请求，对应的是我们的更新的请求啊同学们，但后面两者在我们项目当中目前没有使用到，我们更多使用前面的三者。啊，当封装出来是希望呢，大家能够了解这样封装的目的和意义，那么经过了这样的封装之后，我们在调用接口的时候是怎么调用的呢？我们回到我们的test点当中，我们来看一下刚才的那一系列的操作。啊，刚才我们的操作，我们再回忆一下需要请求说需要怎么执行，我们需要这么操作。写那么长的一段代码来帮我请求啊，我们看一下哈，在调试当中大家要保持个记忆啊，TEST20五行输出了。

返回的结果。然后这时候经过了封装之后的接口的调用会变成什么样呢？我们看一下，我们把这里的内容稍微注释一下，OK，以便待会我们比较一下它们两者之间的区别。以及封装的好处，这时候呢，我要使用刚才我封装好API里面封装好的这子的方法，我们需要做什么事情呢？我们需要在这里先对我们的接口进行引用。啊，我们这里使用相对路径。上一层的上一层找到。然后找到APIJS啊，我们把它引入进来，然后呢，复制给这个临时的变量啊，我们看一下这里面呢，它是导出一个对象形式，导出这个内容，是我们在调用它的时候呢，也是通过它的值就是一个对象，我们通过调用一个对象的形式来得到这个内容，我们可以这里写上什么，写上一个ay c。

因为它是个promise，所以说我们可以改用一个什么用promise的得餐的形式叫is等于。okapi.post请求。啊，当然这里我们有传参啊，我们一样的这个地方我们也传入一个请求链接，请求链接我们还是要写前面这一节吗？我们因为封装好了，所以我们前面的这一节内容我们是不用写的了。看到吗？我们只要把后面非公共部分的区域填写进来就可以了，所以我在这个地方啊，这里拆分一下，上有拆分。我这里可以把模拟器暂时关闭一下哈，我们这里面呢，我们看一下我在。发送请test发送请求说这个地方我提什么，我叫po请求。然后po请求，我需要传用我要请求的部分就可以了，就是什么就是对应的就是我们传统方法当中的这一个后面的这几个部分。

就什么就是common。然后呢，Get system。Info。然后呢，第二个就是我们要传来的参数。好，同学们，然后这时候呢，我们就可以把这个结果。打印出来看一下。OK，原来我们需要那么多行代码才能完成请求，现在已经变成为两行代码就能实现了，这时候我们看一下它执行的结果。啊，还是点一下编译。然后呢，我们得看一下调试器。同学们看到了吗？这时候还是TEST2056行这个代码就是我们现在的这一个16行，我们看一下打印什么东西，有没有看到是自己处里面有一些我们对应同样的一些客服信息的内容，看到吗？同学们啊，这时候我们看到两者请求的结果是一样的，说你会发现如果我们对于接口进行封装之后，我们请求的代码和原来传统模式的原生的代直接使用官方提供API的代码是少了，不是一点半点，而且我们整个贯穿我们整个应用当中，其实我们不会只有一个地方发送请求，我们在很多很多地方都有发送请求，所以这个时候呢，我们建议大家一定要在小程序的原生开发当中先做好第一个工作，就是对于API请求方式的官方接口的二次封装。

这就是我们这节课给大家带来的一个体验。希望大家能够。通过阅读我们的源码，了解API封装的方式。同学们，记得在你项目当中替换我们的空当中的环境ID哦，不然你的项目到时候请求的时候就会请求不到你自己的接口了。好了，同学们，这节课就先到这，我们下节课继续。