Promise.All查看图片列表

作者: 易米烊光
发布时间: 2024-12-16 08:06:25 (13天前)
转自：

3 条回复

0#
回复此人
无语 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 以下是您如何做到这一点的示例。 </p> <P> 基本上，对于每个网址 <code> imagesList </code> ，你生产一个 <code> Promise </code> 。你把所有这些承诺都放在了 <code> Promise.all </code> ，将在加载所有图像时返回另一个承诺，并且它将按照传入的顺序进行迭代。 </p> <pre> <code> var imagesList = ["/img1.jpg", "/img2.jpg", "/img3.jpg"]; Promise.all(imagesList.map(url => { const name = url.substring(name.lastIndexOf('/') + 1); return fetch(url) .then(res => res.blob()) .then(blob => new File([blob], name, blob) }); })).then(results => results.forEach(file => myDropzone1.addFile(file))); </code> </pre> <P> 请检查 <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all" rel="nofollow noreferrer"> Promise.all的文档 </A> 如果您需要澄清，请随时提问。 </p> <P> 希望它会有所帮助;） </p> </DIV>

编辑
1#
回复此人
解天 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 我希望这会有所帮助。 </p> <P> </p> <div class =“snippet”data-lang =“js”data-hide =“false”data-console =“true”data-babel =“false”> <div class =“snippet-code”> <pre class="snippet-code-js lang-js prettyprint-override"> <code> function getFile(item) { return new Promise((resolve, reject) =>{ let name = item.substring(item.lastIndexOf('/') + 1); fetch(item) .then(res => res.blob()) .then(blob => { let file = new File([blob], name, blob); resolve(file); }); }) } let imagesList = ["/img1.jpg", "/img2.jpg", "/img3.jpg"]; let promises = imagesList.map(item => getFile(item)); Promise .all(promises) .then(files => { files.forEach(file => myDropzone1.addFile(file)); }) </code> </pre> </DIV> </DIV> <P> </p> </DIV>

编辑

登录后才能参与评论