vue-cli3本地模拟数据之接口封装（二）

        上一章节我已经介绍了如何在vue-cli3脚手架中模拟本地数据，但在实际开发中我们不仅要能够本地模拟数据，而且也要合理的管理我们的请求的API，这样有利于今后的查看以及更改。所以我们通常会把向后台请求的接口封装起来，统一管理所有的API接口，那么基于上篇文章《vue-cli3本地模拟数据（一）》，本章我来介绍如何封装接口请求，如何统一管理接口。

1、项目结构更改，在原来的的目录下，我们在src目录下新增一个api文件夹，里边放两个js文件，一个叫做fetch.js，另一个叫做apis.js。截图如下：

接口封装目录结构

2、那么我们来看看这两个文件里边都有什么，这也是本章的重要部分

2.1、fetch.js文件内容，我们采用的是Promise来异步封装数据，这里过滤的比较干净，通过resolve最终返回的数据都是直接可以无需再判断的，因为我们过滤了两次status==‘200’，第一次过滤浏览器请求是否成功，第二次确保后来处理完毕的数据是否准确无误的，截图如下：

fetch.js说明

2.2、apis.js这个文件就是统一管理所有接口请求方法的，非常简单，此处只创建了一个，后边所有的接口请求都可以放在apis.js中

将接口封装成一个个方法

2.3、在vue文件中调用该方法：我们打开HelloWorld.vue文件，看看具体是如何调用的，分两步：第一步：引用，第二步：调用

在vue组件中使用封装的接口

2.4、最终界面展示结果截图

最终结果

模拟的json数据

好啦，今天的内容就分享到这里，希望能够对您有所帮助，建议在看次文章之前，请先阅读上一篇：《vue-cli3本地模拟数据（一）》