小程序异步处理：多图上传与依次执行网络请求

"小程序异步问题之多个网络请求依次执行并依次收集请求结果" 在小程序开发过程中，异步处理是一项常见的挑战，特别是在涉及多个网络请求且需要按照特定顺序执行并收集结果的情况下。本篇内容主要讨论如何解决小程序中遇到的异步问题，特别是针对多个图片上传的场景。 首先，我们要理解业务逻辑的核心需求。当用户在编写便签时可以添加多张图片，保存时，系统需要检查图片数组，如果包含至少一张图片，就逐个上传图片。每个图片的上传完成后，需收集其在服务器上的地址，并存储在一个数组中。待所有图片上传完毕，将这个包含服务器地址的数组整合到日记对象中，再将日记对象提交至服务器，等待保存成功或失败的反馈。 然而，小程序的网络请求是异步的，这意味着我们不能直接通过return语句获取网络请求的结果。例如，`wx.request`方法的`success`和`fail`回调函数中的`res`参数并不能直接返回。因此，我们需要将依赖于`res`的业务逻辑代码放在这些回调函数内部，以确保在网络请求完成后执行。 这种回调方式虽然解决了结果获取的问题，但当有多个网络请求需要按顺序执行时，就会出现所谓的“回调地狱”，即回调函数嵌套过多，导致代码难以理解和维护。例如，如果先需要请求页面数据，再根据页面数据请求图片数据，那么回调函数可能会深度嵌套。 为了解决这个问题，我们可以采用以下策略： 1. **Promise**：利用Promise可以将异步操作链式化，使得代码结构更加清晰。每个网络请求都可以封装成一个返回Promise的函数，然后使用`.then()`链式调用，确保上一个请求完成后再执行下一个。 ```javascript function uploadImage(imgData) { return new Promise((resolve, reject) => { wx.uploadFile({ url: 'your-upload-url', filePath: imgData, success: res => resolve(res), fail: err => reject(err) }); }); } let imageUrls = []; for (let img of images) { uploadImage(img).then(url => { imageUrls.push(url); // 检查所有图片是否上传完毕 if (imageUrls.length === images.length) { // 提交日记对象到服务器 saveDiary(imageUrls); } }).catch(err => { console.error('图片上传失败', err); }); } ``` 2. **async/await**：对于支持async/await语法的环境（如微信开发者工具最新版本），可以使用这些关键字来创建异步函数，使得代码更接近同步风格。异步函数内部可以使用`await`关键字等待一个Promise完成，使得代码更易于阅读。 ```javascript async function uploadImages(images) { let imageUrls = []; for (let img of images) { try { const res = await wx.uploadFile({ url: 'your-upload-url', filePath: img, }); imageUrls.push(res.url); } catch (err) { console.error('图片上传失败', err); } } if (imageUrls.length === images.length) { await saveDiary(imageUrls); } } uploadImages(images); ``` 通过Promise或async/await，我们可以有效地组织异步代码，避免回调地狱，提高代码的可读性和可维护性。在处理小程序的异步问题时，理解并熟练运用这些技巧至关重要。