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数据