Saber教程：API调用

小鱼儿 2024-02-25 04:21 7阅读 0赞

*  前端开发中最重要的便是api调用，从服务端拉取数据进行业务操作，完毕之后提交数据至服务端
 *  这个流程几乎涵盖了整个系统
 *  下面我们来学习下标准的api调用应该如何编写，同时看下如何和我们的自定义组件结合起来

## 定义一个api ##

*  我们到api文件夹下创建demo.js，内容如下

![在这里插入图片描述][21999b60f5824031ab280b919442c3ca.png]

*  工程封装了`axios`方法，将常用的方法都封装好，方便大家直接调用

## 调用api ##

*  我们准备让这个方法在页面初次加载的时候调用，并把获取到的数据打印出来
 *  进入我们编写的Demo页面，编写一个测试方法

![在这里插入图片描述][ba3e8bd49d594795ad30b0e4f589ca95.png]

>  *  `import xx from xxx` 将我们刚刚编写的api方法引入
>  *  created 属于vue生命周期函数
>  *  `getDetail` 在页面加载的时候执行，并且将返回的值打印在控制台

*  打开系统刷新页面，发现控制台打印与mock设定一致

![在这里插入图片描述][036d593803204132bf6cdf500950e05e.png]

## 使用同步调用api ##

很多业务场景，经常会有同时几个接口调用共同依赖的场景，若超过3个的话，都写在.then方法里进行操作，代码会变得非常不优雅，耦合度也高。下面我们来尝试下使用同步操作代码

*  demo增加mock接口test

![在这里插入图片描述][042e92c407cd4ccaa32b065c18191968.png]

*  对应api增加接口定义

![在这里插入图片描述][a4b21a023cc1433ca41aac3d6f503315.png]

*  更改代码，单独抽离出一个方法init，用于同步代码的操作。同时将init的返回类型打印出来

![在这里插入图片描述][02bd5b5922324303988b56f4847d7608.png]

*  打开系统查看控制台打印，可以看到两条信息都打印成功，而且是按顺序加载。这样解耦了多个接口下都操作，代码看起来更清爽，可读性更高。

![在这里插入图片描述][762624af25e747f8abbd35d1404cc354.png]

*  可以看到，返回都是一个Promise对象，具体介绍，请看：https://www.imooc.com/article/20580
 *  还有一点需要注意的是，如果需要用到promise，那么方法前必须带有async关键字，否则将失效

[21999b60f5824031ab280b919442c3ca.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/25/7df23432a30341e4a8c4f0514d7023df.png
[ba3e8bd49d594795ad30b0e4f589ca95.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/25/05e7de49599845cc9e95534cc4e19ee5.png
[036d593803204132bf6cdf500950e05e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/25/695c9bf79caa46eab51376a2ce914551.png
[042e92c407cd4ccaa32b065c18191968.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/25/3b71f98ade6d413f8d0cffb001b17e7d.png
[a4b21a023cc1433ca41aac3d6f503315.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/25/555941c6dbe245729ae7df5fda978f68.png
[02bd5b5922324303988b56f4847d7608.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/25/8e306f40581749619b618fa95b8ba3f6.png
[762624af25e747f8abbd35d1404cc354.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/25/3f1a187376d04abcb923daaf7a9ab691.png