如何通过作为参数传递的名称调用函数？

Question

How to call a function by its name, passed as parameter? My use case is the next, I have a switch case where I set the data of an api ajax call, once that ajax is complete it should be call print function passing the data result as parameter. I'm not sure this is a good approach, is there any better and easier way to do what I'm trying? Maybe with async / promises ?

function printUpcoming(data) {
    //stuff
}

function printRecently(data) {
    //stuff
}

function printPopular(data) {
    //stuff
}

function requestAjax(dataSend, callFunctionByName) {
    $.ajax({
        type: "POST",
        url: "api-url",
        headers: {
            "Accept": "application/json",
            "user-key": "userkey"
        },
        data: dataSend,
        dataType: 'json',
        success: function(data) {
            jsonVal = data[0];
            //Call the function print depending of switch case option
            callFunctionByName(jsonVal);
        }
    });
}

switch (param) {
    case "upcoming":
        dataSend = "fields * where whatever 1";
        functionName = printUpcoming();
        requestAjax(dataSend, functionName);
        break;
    case "recently":
        dataSend = "fields * where whatever 2";
        functionName = printRecently();
        requestAjax(dataSend, functionName);
        break;
    case "popular":
        dataSend = "fields * where whatever 3";
        functionName = printPopular();
        requestAjax(dataSend, functionName);
        break;
}

Answer 1

One option would be to group functions into an object:

const Printer = {
    upcoming(data) {...},
    recently(data) {...},
    popular(data) {...},
}

and then

requestAjax(dataSend, param)

and in requestAjax

Printer[funcName](jsonVal))

Another option, as @VLAZ suggested, is to get rid of callbacks completely:

async function requestAjax(dataSend) {...}

...

printUpcoming(await requestAjax(...))

Example:

 function printUpcoming(x) { console.log('Upcoming!', x) } async function request() { return $.ajax('https://jsonplaceholder.typicode.com/todos/1') } async function process(param) { switch (param) { case "upcoming": printUpcoming(await request()); break; case "recently": printRecent(await request()); break; } } process('upcoming') 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 

Answer 2

I recommend fetch over jQuery's $.get . To call a function by it's name, you could use eval , but I do not recommend using eval! It may lead to security risks and weird errors. Instead, you can create index of your functions like this:

const AJAX_HANDLERS = { printUpcoming, printRecently, printPopular };

Then using fetch:

async function requestAjax(dataSend, handlerFunction) {

    if (typeof handlerFunction == "string") {
        // Convert "name" to "printName"
        const fnName = "print" + (handlerFunction).replace(/^([a-z])/i, (x, m1) => x.toLocaleUpperCase());
        if (typeof AJAX_HANDLERS[fnName] == "function") {
            handlerFunction = AJAX_HANDLERS[fnName];
        }
        else {
            throw new Error("Invalid function callback name: " + fnName)
        }
    }

    const fetchSettings = {
      method: 'POST',
      headers: {
        "Accept": "application/json",
        "user-key": "userkey"
      },
      body: dataSend
    };
    const result = await fetch("api-url", fetchSettings);
    const jsonResponse = await result.json();

    handlerFunction(jsonResponse[0]);
}