您好,欢迎来到伴沃教育。
搜索
您的当前位置:首页vue-cli3本地模拟数据之接口封装(二)

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

Copyright © 2019- bangwoyixia.com 版权所有 湘ICP备2023022004号-2

违法及侵权请联系:TEL:199 1889 7713 E-MAIL:2724546146@qq.com

本站由北京市万商天勤律师事务所王兴未律师提供法律服务