## 前言 * 前端开发中最重要的便是api调用,从服务端拉取数据进行业务操作,完毕之后提交数据至服务端 * 这个流程几乎涵盖了整个系统 * 下面我们来学习下标准的api调用应该如何编写 * 同时看下如何和我们的自定义组件结合起来 ## 定义一个api 1. 我们到services文件夹下创建demo.js,内容如下 ![](https://box.kancloud.cn/6e715a3b3f52c7952900dd9fcac6d83e_1990x1232.png) 2. 工程封装了`request`方法,将常用的方法都封装好,方便大家直接调用 ## 调用api 1. 我们准备让这个方法在页面初次加载的时候调用,并把获取到的数据打印出来 2. 进入我们编写的Demo页面,编写一个测试方法,`componentWillMount`代表页面将要加载的时候执行自定义方法 ![](https://box.kancloud.cn/12e1f30edf32749a5d92a8d52818c34f_1108x828.png) 3. 刷新页面查看控制台,发现定义成功 ![](https://box.kancloud.cn/9cb7ab6c5ed03510367ee14815e92389_1582x1042.png) 4. 下面我们增加api的调用,传入自定义的数据,并将其返回打印出来 ![](https://box.kancloud.cn/b2c8a79b3901b7f1f90d025445248ebb_1222x1010.png) 5. 打开系统查看控制台打印,发现打印成功 ![](https://box.kancloud.cn/55bc64fbca22b87d10d383777304704e_1132x806.png) ## 使用同步调用api 很多业务场景,经常会有同时几个接口调用共同依赖的场景,若超过3个的话,都写在.then方法里进行操作,代码会变得非常不优雅,耦合度也高。下面我们来尝试下使用同步操作代码 1. demo增加mock接口test ![](https://box.kancloud.cn/7903e154aea11e819a60803c4548182c_1094x774.png) 2. 对应service增加接口定义 ![](https://box.kancloud.cn/632b0d0026e205290fb4d50cdf3c9eb7_1146x398.png) 3. 更改代码,单独抽离出一个方法init,用于同步代码的操作。同时将init的返回类型打印出来 ![](https://box.kancloud.cn/0d40c019d6a7edff3d695ad309a1ab53_1346x1436.png) 4. 打开系统查看控制台打印,可以看到两条信息都打印成功,而且是按顺序加载。这样解耦了多个接口下都操作,代码看起来更清爽,可读性更高。 ![](https://box.kancloud.cn/4cd80ea884e52abcecab98652c5f4a12_1386x1166.png) 5. 可以看到,返回都是一个Promise对象,具体介绍,请看:https://www.imooc.com/article/20580 6. 还有一点需要注意的是,如果需要用到promise,那么方法前必须带有`async`关键字,否则将失效