Home > Software engineering >  Pass method as parameter and use that method on an object (Javascript)
Pass method as parameter and use that method on an object (Javascript)

Time:06-09

I need a javascript function that receives a method, and calls that method on an object created inside the function.

const callMethod = myMethod => {
    someObject.myMethod();
}

I need this because I want to make a function that makes an HTTP request via fetch, and specify which method to call after getting the response from the fetch, where the options are: .json(), .text(), .blob(), .formData() or .arrayBuffer()

This is my code:

const sendPost = (url, bodyObj) => {
    return new Promise(async (resolve, reject) => {
        try {
            const settings = {
                method: "POST",
                headers: {"Content-Type":"application/json"},
                body: JSON.stringify(bodyObj)
            }
            let req = await fetch(url, settings);
            
            // Here I'm forcing the .json() method, I want it to be able to choose between .json(), .text(), etc. when calling this function:
            let res = await req.json();
            
            return resolve(res);
        } catch (e) {
            return reject(e);
        }
    });
}

I have tried this, but it didn't work:

const sendPost = (url, bodyObj, func) => {
    // ...
    let req = await fetch(url, settings);
    let res = await req.func();
    // ...
}

sendPost("some url", {some object}, Response.json); // TypeError: req.func is not a function

I think the easiest way to do this is to pass a string with the name of the method I want to use, and then decide which method I want to call using conditionals. But I would like something more robust, which allows passing the pointer to an actual method, since the content of a string can be misspelled.

CodePudding user response:

There are a few ways you could do this.

The way you've written it, if you were to pass in a string ("json"), then you could do this:

let response = await sendPost(..., "json");
    let res = await req.[func]();

That finds the member with the name matching the string found in func.

You could also use a callback:

let json = await sendPost(..., response => response.json());
    let res = await func(req);

But the only thing you're doing after that point in your helper function is resolving errors and returning the result. It might make more sense to have your helper function return a Promise with the response in it.

let response = await sendPost(...);
let json = response.json();
    let res = await fetch(url, settings);
    return res;

CodePudding user response:

This is known as a higher order function (HOF) since you pass a function as an argument to another function.

const someObject = {
  json: () => console.log("json"),
  blob: () => console.log("blob"),
  text: () => console.log("text"),

}

function callMethod(myMethod) {
    myMethod?.();
}

callMethod(someObject.json);
callMethod(someObject.blob);
callMethod(someObject.text);

The optional chaining function invocation ?. is optional but seeing as this is js and not ts, some type of runtime guard might be helpful.

  • Related