DEV Community

aben
aben

Posted on

await, then, return?

#help #javascript

Hi,

I'm using Sharp for compressing uploaded user images. I want to be sure that my approach is safe and performs in theory for all cases.

I'm rather hesitant, as I didn't set proper testing yet and for now I didn't deploy the app but doing big refactoring on the code then I will test everything the next days.

I am hesitant if my code is correct, and would like to hear from you also about it. Here it is:

const width_ = 200
try {
    thumbnailBuffer = await sharp(originalBuffer)
        .metadata()
        .then(({ width }) => {
            if(width > 400) {
                return sharp(originalBuffer)
                    .resize(Math.round(width * 0.5)).toBuffer()
            } else if(width > 200){
                return sharp(originalBuffer)
                    .resize(width_, { fit: 'inside' }).toBuffer()
            } else {
                return undefined
            }
        })
} catch (error) {
    req.log.error(`post/listings#postListingHandler#sharp: ${error.message}`)
}
Enter fullscreen mode Exit fullscreen mode

Will thumbnailBuffer contain a value of a new buffer or a promise or this whole thing is incorrect ?

Thanks a lot !!

Top comments (5)

Collapse
 
tqbit profile image
tq-bit • • Edited

I've taken the code and modified it slightly. Like this, it seemed a bit easier to understand for me:

export async function resizeBuffer(originalBuffer) {
    const width_ = 200;
    try {
        const { width } = await sharp(originalBuffer).metadata();
        if (width > 400) {
            return sharp(originalBuffer)
                .resize(Math.round(width * 0.5))
                .toBuffer();
        }

        if (width > 200) {
            return sharp(originalBuffer).resize(width_, { fit: 'inside' }).toBuffer();
        }

        return undefined;
    } catch (error) {
        console.error(`post/listings#postListingHandler#sharp: ${error.message}`);
    }
}
Enter fullscreen mode Exit fullscreen mode

The type of value this function returns is Promise<any>. More specifically:

  • If the image's width is greater than 400, it's resized to half its original size and a Buffer is returned inside a Promise
  • If the image's width is greater than 200 and lesser than 400, it's resized to 200 and a Buffer is returned inside a Promise
  • If the image's width is lesser than 200, undefined is returned inside a Promise

A hint of advice: If you're using VSCode, you can add the following line to you config file to enable simple type checks for Javascript:

"js/ts.implicitProjectConfig.checkJs": true,

Collapse
 
bacloud22 profile image
aben •

Thanks a lot @tqbit I will take a look on the extension as well.
I found some examples in gists so I will write proper tests and experience with this.

Collapse
 
nombrekeff profile image
Keff •

As far as I can tell, without knowing the sharp API at all, it seems that thumbnailBuffer will be a buffer is the width is greater that 200, otherwise it will be undefined.

Collapse
 
bacloud22 profile image
aben •

Yes that what I intended to writing the code. But I meant JavaScript language speaking, does the return inside then return the value (here buffer/undefined) or a promise or go to heat...

Collapse
 
nombrekeff profile image
Keff •

It should be the value, as you're using async/await.

Read next

om_vaja profile image

Node JS - The Event Loop

Om Vaja -

probir-sarkar profile image

Next.js Interview Mastery: Essential Questions 81-90 (Part 9)

Probir Sarkar -

aniruddhadak profile image

👨‍💻 My Developer Portfolio: Showcasing My Journey and Projects 💖

ANIRUDDHA ADAK -

elidvenega profile image

Svelte Counter I made to understand runes

Elid -