如何实现小程序中多个网络请求按顺序依次执行并逐个处理？

本文共计1958个文字，预计阅读时间需要8分钟。

业务逻辑+近期开发一个便民小程序的需求，有一个这样的需求：用户在写便民签的时候，可以添加一个或多个图片。对于这个需求，我们用户按下保存键时，内部具体的实现逻辑是这样的：

业务逻辑

最近开发一个便签小程序的时候，有这样一个需求：用户可以在写便签的时候添加一个或多个图片。

对于这个需求，我们用户按下保存键时，内部具体的实现上是这样的逻辑：

1. 首先检测用户是否传入了图片，如果存储本地图片地址的数组长度>=1,则将图片数组放入上传图片的函数。
2. 由于小程序网络请求大小限制，我们只能采取循环上传单文件，然后收集每次请求的结果--图片在服务器的地址，最后将结果放在一个数组中供后续的操作使用。
3. 当图片上传函数全部执行完毕后，将数组中的图片数组取出来，赋值到日记对象中，再将整个日记对象提交到服务器。
4. 服务器返回保存成功或失败。

思路其实非常清晰简单，但是在代码实现上却翻了大跟头。

异步带来的问题

小程序的网络请求是异步的：我们无法通过return来将网络请求结果返回出来使用。

wx.request({ //...省略其他属性 success: function (res) { }, fail: function (res) { } })

例如在微信中发送网络请求，我们只能使用微信提供的方法wx.xxx，其中请求的结果保存在res中，而res无法直接return得到。