Vue 中使用 Promise 等待 forEach 循环网络请求完成后执行后续方法
在 Vue 中,可以使用 Promise 来等待网络请求完成后再执行后续方法。首先,将网络请求封装成一个返回 Promise 的函数。然后,在 forEach 循环中,将每个网络请求的 Promise 存储在一个数组中。最后,使用 Promise.all 方法来等待所有网络请求完成后执行后续方法。\n\n以下是一个示例代码:\n\njavascript\n// 封装网络请求为一个返回 Promise 的函数\nfunction apiRequest(data) {\n return new Promise((resolve, reject) => {\n // 发起网络请求\n // ...\n // 请求成功时调用 resolve 方法,将结果返回\n // 请求失败时调用 reject 方法,将错误信息返回\n });\n}\n\n// Vue 组件中的方法\nmethods: {\n async executeRequests() {\n // 待执行的网络请求数组\n const requests = [];\n\n // forEach 循环,将每个网络请求的 Promise 存储在数组中\n this.items.forEach((item) => {\n const request = apiRequest(item);\n requests.push(request);\n });\n\n try {\n // 使用 Promise.all 等待所有网络请求完成\n const results = await Promise.all(requests);\n\n // 所有网络请求完成后执行后续方法\n this.handleResults(results);\n } catch (error) {\n // 处理错误\n console.error(error);\n }\n },\n\n handleResults(results) {\n // 处理网络请求结果\n // ...\n }\n}\n\n\n在上述示例中,executeRequests 方法使用 async 和 await 关键字来等待 Promise.all 的结果,保证在所有网络请求完成后执行后续方法。handleResults 方法用于处理网络请求的结果。
原文地址: https://www.cveoy.top/t/topic/pT6X 著作权归作者所有。请勿转载和采集!