我要评论filereader的使用机会很多，但是它是异步的，因此很容易出现回调地狱。
我们可以使用async/await特性，它允许我们以同步的方式调用异步代码。
封装成方法
export async function readtextfile(file: file) {
const reader = new filereader();
reader.readastext(file);
return new promise((resolve, reject) => {
reader.onload = () => resolve(reader.result);
reader.onerror = () => reject(reader.error);
});
}
export async function readbinaryfile(file: file) {
const reader = new filereader();
reader.readasarraybuffer(file);
return new promise((resolve, reject) => {
reader.onload = () => resolve(reader.result);
reader.onerror = () => reject(reader.error);
});
}
export async function readastext(file: file) {
const reader = new filereader();
reader.readastext(file);
return new promise((resolve, reject) => {
reader.onload = () => resolve(reader.result);
reader.onerror = () => reject(reader.error);
});
}
使用方法：
(async()=> {
const buffer1 = await readtextfile(file);
const buffer2 = await readbinaryfile(file);
const buffer3 = await readastext(file);
})();
javascript封装成一个class
class filereaderex extends filereader{
constructor(){
super();
}
#readas(blob, ctx){
return new promise((res, rej)=>{
super.addeventlistener("load", ({target}) => res(target.result));
super.addeventlistener("error", ({target}) => rej(target.error));
super[ctx](blob);
});
}
readasarraybuffer(blob){
return this.#readas(blob, "readasarraybuffer");
}
readasdataurl(blob){
return this.#readas(blob, "readasdataurl");
}
readastext(blob){
return this.#readas(blob, "readastext");
}
}
使用方法：
(async()=>{
const buffer1 = await new filereaderex().readasarraybuffer(blob1);
const buffer2 = await new filereaderex().readasdataurl(blob2);
const buffer3 = await new filereaderex().readastext(blob3);
})();
typescript封装成一个class
export class filereaderex extends filereader {
constructor() {
super();
}
private readas(blob: blob, ctx: 'readasarraybuffer' | 'readasdataurl' | 'readastext') {
return new promise((res, rej) => {
super.addeventlistener("load", ({target}) => res(target?.result));
super.addeventlistener("error", ({target}) => rej(target?.error));
super[ctx](blob);
});
}
readasarraybuffer(blob: blob) {
return this.readas(blob, "readasarraybuffer");
}
readasdataurl(blob: blob) {
return this.readas(blob, "readasdataurl");
}
readastext(blob: blob) {
return this.readas(blob, "readastext");
}
}
使用方法：
(async()=>{
const buffer1 = await new filereaderex().readasarraybuffer(blob1);
const buffer2 = await new filereaderex().readasdataurl(blob2);
const buffer3 = await new filereaderex().readastext(blob3);
})();
typescript基于泛型
/**
* @description 同步调用包装
* @param promise 需要被调用的异步方法
*/
async function asyncwrap<t = any>(promise: promise<t>): promise<t | null> {
try {
return await promise;
} catch (err) {
return null;
}
}
export async function filereaderwrap<t = any>(blob: blob, ctx: 'readasarraybuffer' | 'readasdataurl' | 'readastext'): promise<any> {
const reader = new filereader();
reader[ctx](blob);
return new promise((resolve, reject) => {
reader.onload = () => resolve(reader.result);
reader.onerror = () => reject(reader.error);
});
}使用方法：
(async()=>{
const buffer1 = await asyncwrap<arraybuffer>(filereaderwrap<arraybuffer>(file, 'readasarraybuffer'));
const buffer2 = await asyncwrap<arraybuffer>(filereaderwrap<arraybuffer>(file, 'readasdataurl'));
const buffer3 = await asyncwrap<arraybuffer>(filereaderwrap<arraybuffer>(file, 'readastext'));
})();
到此这篇关于详解javascript如何通过async/await优雅地使用filereader的文章就介绍到这了,更多相关javascript async/await使用filereader内容请搜索代码网以前的文章或继续浏览下面的相关文章希望大家以后多多支持代码网！
发表评论