Value from async function in URL inside Javascript fetch











up vote
1
down vote

favorite












The below code is inside a react native application:



Let's say I have the below function in API.js file:



export function getUsers() {
return fetch(BASE_URL+'/users')
.then(response => {
return response;
})
}


My application's BASE URL is dynamic or can be customized by the user. Which means, I am keeping this value in AsyncStorage of my application.



Which means, AsyncStorage.getItem('BASE_URL') holds the value for my actual BASE_URL. Problem is, the getItem function itself is a promise function. That is only wrapping it to a promise syntax will make it work. For example,



AsyncStorage.getItem('BASE_URL').then(url => {
console.log(url) //gets the URL here properly
});


My problem is, how to actually replace the BASE_URL variable in the fetch request with this value?



Remember, API.js file is not a 'component'. It just holds export functions for different API endpoints.










share|improve this question






















  • Why cant you pass the BASE_URL as parameter to the getusers function and call it inside .then of getItem?
    – Shyam Babu
    2 days ago










  • Ah. Nice idea. Thanks.
    – Jithesh Kt
    2 days ago















up vote
1
down vote

favorite












The below code is inside a react native application:



Let's say I have the below function in API.js file:



export function getUsers() {
return fetch(BASE_URL+'/users')
.then(response => {
return response;
})
}


My application's BASE URL is dynamic or can be customized by the user. Which means, I am keeping this value in AsyncStorage of my application.



Which means, AsyncStorage.getItem('BASE_URL') holds the value for my actual BASE_URL. Problem is, the getItem function itself is a promise function. That is only wrapping it to a promise syntax will make it work. For example,



AsyncStorage.getItem('BASE_URL').then(url => {
console.log(url) //gets the URL here properly
});


My problem is, how to actually replace the BASE_URL variable in the fetch request with this value?



Remember, API.js file is not a 'component'. It just holds export functions for different API endpoints.










share|improve this question






















  • Why cant you pass the BASE_URL as parameter to the getusers function and call it inside .then of getItem?
    – Shyam Babu
    2 days ago










  • Ah. Nice idea. Thanks.
    – Jithesh Kt
    2 days ago













up vote
1
down vote

favorite









up vote
1
down vote

favorite











The below code is inside a react native application:



Let's say I have the below function in API.js file:



export function getUsers() {
return fetch(BASE_URL+'/users')
.then(response => {
return response;
})
}


My application's BASE URL is dynamic or can be customized by the user. Which means, I am keeping this value in AsyncStorage of my application.



Which means, AsyncStorage.getItem('BASE_URL') holds the value for my actual BASE_URL. Problem is, the getItem function itself is a promise function. That is only wrapping it to a promise syntax will make it work. For example,



AsyncStorage.getItem('BASE_URL').then(url => {
console.log(url) //gets the URL here properly
});


My problem is, how to actually replace the BASE_URL variable in the fetch request with this value?



Remember, API.js file is not a 'component'. It just holds export functions for different API endpoints.










share|improve this question













The below code is inside a react native application:



Let's say I have the below function in API.js file:



export function getUsers() {
return fetch(BASE_URL+'/users')
.then(response => {
return response;
})
}


My application's BASE URL is dynamic or can be customized by the user. Which means, I am keeping this value in AsyncStorage of my application.



Which means, AsyncStorage.getItem('BASE_URL') holds the value for my actual BASE_URL. Problem is, the getItem function itself is a promise function. That is only wrapping it to a promise syntax will make it work. For example,



AsyncStorage.getItem('BASE_URL').then(url => {
console.log(url) //gets the URL here properly
});


My problem is, how to actually replace the BASE_URL variable in the fetch request with this value?



Remember, API.js file is not a 'component'. It just holds export functions for different API endpoints.







javascript reactjs react-native






share|improve this question













share|improve this question











share|improve this question




share|improve this question










asked 2 days ago









Jithesh Kt

4443725




4443725












  • Why cant you pass the BASE_URL as parameter to the getusers function and call it inside .then of getItem?
    – Shyam Babu
    2 days ago










  • Ah. Nice idea. Thanks.
    – Jithesh Kt
    2 days ago


















  • Why cant you pass the BASE_URL as parameter to the getusers function and call it inside .then of getItem?
    – Shyam Babu
    2 days ago










  • Ah. Nice idea. Thanks.
    – Jithesh Kt
    2 days ago
















Why cant you pass the BASE_URL as parameter to the getusers function and call it inside .then of getItem?
– Shyam Babu
2 days ago




Why cant you pass the BASE_URL as parameter to the getusers function and call it inside .then of getItem?
– Shyam Babu
2 days ago












Ah. Nice idea. Thanks.
– Jithesh Kt
2 days ago




Ah. Nice idea. Thanks.
– Jithesh Kt
2 days ago












1 Answer
1






active

oldest

votes

















up vote
1
down vote



accepted










You can use promise chaining, where the result of AsyncStore#getItem will be used as input to fetch call. The linked document explain the situation that you are facing quite nicely




A common need is to execute two or more asynchronous operations back to back, where each subsequent operation starts when the previous operation succeeds, with the result from the previous step. We accomplish this by creating a promise chain.




So, changes that you need in you given code is



export function getUsers() {
return AsyncStorage.getItem('BASE_URL').then(url => {
return fetch(url+'/users').then(response => response.json());
});
}


You can use the getUsers() without worrying about the BASE_URL. This also ensures the separation of concern.



Hope this will help!






share|improve this answer





















    Your Answer






    StackExchange.ifUsing("editor", function () {
    StackExchange.using("externalEditor", function () {
    StackExchange.using("snippets", function () {
    StackExchange.snippets.init();
    });
    });
    }, "code-snippets");

    StackExchange.ready(function() {
    var channelOptions = {
    tags: "".split(" "),
    id: "1"
    };
    initTagRenderer("".split(" "), "".split(" "), channelOptions);

    StackExchange.using("externalEditor", function() {
    // Have to fire editor after snippets, if snippets enabled
    if (StackExchange.settings.snippets.snippetsEnabled) {
    StackExchange.using("snippets", function() {
    createEditor();
    });
    }
    else {
    createEditor();
    }
    });

    function createEditor() {
    StackExchange.prepareEditor({
    heartbeatType: 'answer',
    convertImagesToLinks: true,
    noModals: true,
    showLowRepImageUploadWarning: true,
    reputationToPostImages: 10,
    bindNavPrevention: true,
    postfix: "",
    imageUploader: {
    brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
    contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
    allowUrls: true
    },
    onDemand: true,
    discardSelector: ".discard-answer"
    ,immediatelyShowMarkdownHelp:true
    });


    }
    });














     

    draft saved


    draft discarded


















    StackExchange.ready(
    function () {
    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53183816%2fvalue-from-async-function-in-url-inside-javascript-fetch%23new-answer', 'question_page');
    }
    );

    Post as a guest
































    1 Answer
    1






    active

    oldest

    votes








    1 Answer
    1






    active

    oldest

    votes









    active

    oldest

    votes






    active

    oldest

    votes








    up vote
    1
    down vote



    accepted










    You can use promise chaining, where the result of AsyncStore#getItem will be used as input to fetch call. The linked document explain the situation that you are facing quite nicely




    A common need is to execute two or more asynchronous operations back to back, where each subsequent operation starts when the previous operation succeeds, with the result from the previous step. We accomplish this by creating a promise chain.




    So, changes that you need in you given code is



    export function getUsers() {
    return AsyncStorage.getItem('BASE_URL').then(url => {
    return fetch(url+'/users').then(response => response.json());
    });
    }


    You can use the getUsers() without worrying about the BASE_URL. This also ensures the separation of concern.



    Hope this will help!






    share|improve this answer

























      up vote
      1
      down vote



      accepted










      You can use promise chaining, where the result of AsyncStore#getItem will be used as input to fetch call. The linked document explain the situation that you are facing quite nicely




      A common need is to execute two or more asynchronous operations back to back, where each subsequent operation starts when the previous operation succeeds, with the result from the previous step. We accomplish this by creating a promise chain.




      So, changes that you need in you given code is



      export function getUsers() {
      return AsyncStorage.getItem('BASE_URL').then(url => {
      return fetch(url+'/users').then(response => response.json());
      });
      }


      You can use the getUsers() without worrying about the BASE_URL. This also ensures the separation of concern.



      Hope this will help!






      share|improve this answer























        up vote
        1
        down vote



        accepted







        up vote
        1
        down vote



        accepted






        You can use promise chaining, where the result of AsyncStore#getItem will be used as input to fetch call. The linked document explain the situation that you are facing quite nicely




        A common need is to execute two or more asynchronous operations back to back, where each subsequent operation starts when the previous operation succeeds, with the result from the previous step. We accomplish this by creating a promise chain.




        So, changes that you need in you given code is



        export function getUsers() {
        return AsyncStorage.getItem('BASE_URL').then(url => {
        return fetch(url+'/users').then(response => response.json());
        });
        }


        You can use the getUsers() without worrying about the BASE_URL. This also ensures the separation of concern.



        Hope this will help!






        share|improve this answer












        You can use promise chaining, where the result of AsyncStore#getItem will be used as input to fetch call. The linked document explain the situation that you are facing quite nicely




        A common need is to execute two or more asynchronous operations back to back, where each subsequent operation starts when the previous operation succeeds, with the result from the previous step. We accomplish this by creating a promise chain.




        So, changes that you need in you given code is



        export function getUsers() {
        return AsyncStorage.getItem('BASE_URL').then(url => {
        return fetch(url+'/users').then(response => response.json());
        });
        }


        You can use the getUsers() without worrying about the BASE_URL. This also ensures the separation of concern.



        Hope this will help!







        share|improve this answer












        share|improve this answer



        share|improve this answer










        answered 2 days ago









        Prasun

        2,2542813




        2,2542813






























             

            draft saved


            draft discarded



















































             


            draft saved


            draft discarded














            StackExchange.ready(
            function () {
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53183816%2fvalue-from-async-function-in-url-inside-javascript-fetch%23new-answer', 'question_page');
            }
            );

            Post as a guest




















































































            Popular posts from this blog

            横浜市

            Rostock

            Europa