then on Objects

By  on  

Promises were a revelation in JavaScript development, allowing us to enjoy async processing and avoid callback hell. Many new APIs like Battery API, Cache API, and others use the promise API. One fact you may not know is that you can add a then method to any object to make it Promise-like!

Let's create a generic object with a then method that accepts a resolve function as its argument:

j = { then: resolve => fetch("/").then(resolve) }

With an object featuring a then method, you can call the then method or use await syntax:

j.then(res => console.log(res));
// Response {type: "basic", url: "https://davidwalsh.name/", redirected: false, status: 200, ok: true, …}

// ... or an await...
const response = await j;
// Response {type: "basic", url: "https://davidwalsh.name/", redirected: false, status: 200, ok: true, …}

This technique is interesting and, under the right circumstances, can be employed to represent a logical usage.

Hack or useful? How would you use this perk of then?

Recent Features

Incredible Demos

  • By
    Image Manipulation with PHP and the GD Library

    Yeah, I'm a Photoshop wizard. I rock the selection tool. I crop like a farmer. I dominate the bucket tool. Hell, I even went as far as wielding the wizard wand selection tool once. ...OK I'm rubbish when it comes to Photoshop.

  • By
    Creating Spacers with Flexbox

    I was one of the biggest fans of flexbox before it hit but, due to being shuffled around at Mozilla, I never had the chance to use it in any practice project; thus, flexbox still seems like a bit of a mystery to me.  This greatly...

Discussion

  1. Edgar

    Nice, although fetch may be a bad example since you would definitely want to deal with errors. But for promises of which you are sure they always resolve, it’s cool.

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!