phpjson打包技巧_vue实现多接口轮询并把json打包成json文件且压缩为zip包

文章目录 [+]

示例：

let p1 = new Promise((resolve, reject) => { resolve('成功了')})let p2 = new Promise((resolve, reject) => { resolve('success')})let p3 = Promse.reject('失落败')Promise.all([p1, p2]).then((result) => { console.log(result) //['成功了', 'success']}).catch((error) => { console.log(error)})Promise.all([p1,p3,p2]).then((result) => { console.log(result)}).catch((error) => { console.log(error) // 失落败了，打出 '失落败'})

Promse.all在处理多个异步处理时非常有用，比如说一个页面上须要等两个或多个ajax的数据回来往后才正常显示，在此之前只显示loading图标。

phpjson打包技巧_vue实现多接口轮询并把json打包成json文件且压缩为zip包

须要特殊把稳的是，Promise.all得到的成功结果的数组里面的数据顺序和Promise.all吸收到的数组顺序是同等的，即p1的结果在前，即便p1的结果获取的比p2要晚。
这带来了一个绝大的好处：在前端开拓要求数据的过程中，偶尔会碰着发送多个要求并根据要求顺序获取和利用数据的场景，利用Promise.all毫无疑问可以办理这个问题。

（图片来自网络侵删）

实际需求：

const a = new Promise((resolve, reject) => {api.aDownload(i.id).then(r => resolve(r)).catch(e => reject(e)) }), b = new Promise((resolve, reject) => {api.bDownload(i.id).then(r => resolve(r)).catch(e => reject(e)) }), c = new Promise((resolve, reject) => {api.csDownload(i.id).then(r => resolve(r)).catch(e => reject(e)) }), d = new Promise((resolve, reject) => {api.dDownload(i.id).then(r => resolve(r)).catch(e => reject(e)) }), e = new Promise((resolve, reject) => {api.cDownload(i.id).then(r => resolve(r)).catch(e => reject(e)) }), filename = new Promise((resolve, reject) => {api.getFIlename(i.id).then(r => resolve(r)).catch(e => reject(e)) })Promise.all([a, b, c, d, e, filename]).then(r => { console.log(r) // 成功回调}).catch(e => { console.log(e) // 失落败回调})

返回的结果集

（实在这里第二和第三个接口也是Object类型来的，后来改了，没切到图）

2. JSZip和File-saver的利用

npm install JSZip File-saver# 或者yarn add JSZip File-saver利用jszip先把文件下载到后，进行转义并保存为对应名称的json文件

const zip = new JSZip()zip.file('a.json', JSON.stringify(a), { binary: false })

第一个是输出的名称

第二个是内容是须要进行转义的

第三个binary: false是是否转为二进制码，如果为true，那么就会涌现中文乱码的情形

json文件拿到了往后，进行blob压缩并输出文件的二进制流，这里用到jszip的generateASync

zip.generateAsync({ type: "blob", // 压缩类型 compression: "DEFLATE", // 压缩算法 compressionOptions: { // 压缩级别 level: 9 }}).then(res => { console.log(res)}).catch(err => { console.log(err)})json文件准备好了往后，进行json文件压缩成zip，然后授予定义的filename名称，并下载下来

这里用到了file-saver的saveAs能力

FileSaver.saveAs(res, 'xxx.zip')

至此，功能实现完全代码

import jszip from 'jszip'import fileSaver from 'file-saver'const zip = JSZip(), FileSaver = fileSaver(), a = new Promise((resolve, reject) => {api.aDownload(i.id).then(r => resolve(r)).catch(e => reject(e)) }), b = new Promise((resolve, reject) => {api.bDownload(i.id).then(r => resolve(r)).catch(e => reject(e)) }), c = new Promise((resolve, reject) => {api.csDownload(i.id).then(r => resolve(r)).catch(e => reject(e)) }), d = new Promise((resolve, reject) => {api.dDownload(i.id).then(r => resolve(r)).catch(e => reject(e)) }), e = new Promise((resolve, reject) => {api.cDownload(i.id).then(r => resolve(r)).catch(e => reject(e)) }), filename = new Promise((resolve, reject) => {api.getFIlename(i.id).then(r => resolve(r)).catch(e => reject(e)) })Promise.all([a, b, c, d, e, filename]).then(r => { zip.file('a.json', JSON.stringify(r[0].data), { binary: false }) zip.file('b.json', JSON.stringify(r[1].data), { binary: false }) zip.file('c.json', JSON.stringify(r[2].data), { binary: false }) zip.file('d.json', JSON.stringify(r[3].data), { binary: false }) zip.file('e.json', JSON.stringify(r[4].data), { binary: false }) zip.generateAsync({ type: "blob", // 压缩类型 compression: "DEFLATE", // 压缩算法 compressionOptions: { // 压缩级别 level: 9 } }).then(res => { FileSaver.saveAs(res, `${ r[5].data.file_name }.zip`) }).catch(err => { console.log(err) })}).catch(e => { console.log(e) // 失落败回调})写码不易，麻烦给点鼓励，感激末了末了：

"大众年夜众号：小何发展，佛系更文，都是自己曾经踩过的坑或者是学到的东西

有兴趣的小伙伴欢迎关注我哦，我是：何小玍。
大家一起进步鸭