How to modify an object after axios get request is resolved

axios get request with params
axios post headers
axios get with headers
axios tutorial
axios - npm
axios react
axios cheat sheet
axios request interceptor

I am setting the res.data of an object containerInfo in Vue afer making an axios get request, like so:

methods: {
    searchContainers(containerSearch) {
      this.containerQuery = JSON.parse(containerSearch.container_query)[0];
      this.imageBranch = JSON.parse(containerSearch.container_query)[1];
      this.containerInfo["image_branch"] = this.imageBranch
      this.url = this.containerQuery.split('/');

      axios.get(`http://localhost:8000/get?name=${this.url[0]}/${this.url[1]}/${this.url[2]}&ver=${this.url[3]}`)
        .then(res => this.containerInfo = res.data)
        .then(this.containerInfo = [...this.containerInfo, this.imageBranch]);

    }

I want to add this.imageBranch to the containerInfo object after the data object is received/set in vue.

The issue is that the axios res, once received (takes a few secs), deletes the this.imageBranch key/value added. I know I should probably add it after the promise is resolved but I can't figure out how.

Can someone please help!

Instead of using two .then, use only one and execute all your code inside the arrow function, like this:

methods: {
    searchContainers(containerSearch) {
        this.containerQuery = JSON.parse(containerSearch.container_query)[0];
        this.imageBranch = JSON.parse(containerSearch.container_query)[1];
        this.containerInfo["image_branch"] = this.imageBranch
        this.url = this.containerQuery.split('/');

        axios.get(`http://localhost:8000/get?name=${this.url[0]}/${this.url[1]}/${this.url[2]}&ver=${this.url[3]}`)
            .then(res => {
                this.containerInfo = res.data;
                this.containerInfo = [...this.containerInfo, this.imageBranch]
            });

    }

Returning data from Axios API, Return the promise from the axios call in the axiosTest function, then get the axiosTest() .then(data => { response.json({ message: 'Request received! array before calling the axios get and after .then(function(response)) pushed This will result in our local Javascript objects being updated based on promise resolution. fetchData(URL) function makes a network request and returns promise object with pending status. Promise.all will wait till all promises are resolved or any promise is rejected.

I recommend using await/async syntax which is clear and straightforward. So the codes should be like this

async searchContainers() {
  const res = await axios.get(`http://localhost:8000/get?name=${this.url[0]}/${this.url[1]}/${this.url[2]}&ver=${this.url[3]}`);
  this.containerInfo = res.data;
  this.containerInfo = [...this.containerInfo, this.imageBranch];
}

How to make HTTP requests like a pro with Axios, In this post we will take a good look at Axios, a client HTTP API based Making an HTTP request is as easy as passing a config object to the Axios function. This method returns a single promise object that resolves only when all To modify the data before passing it to then() or catch() , you can set the� resolves axios#1628 * Fix a typo in README * Fix grammar in README.md * Axios create url bug * Fix axios#2234 * added spacing --eslint * added test cases * removed unexpected cases after updating the code * Fixing set `config.method` after mergeConfig for Axios.prototype.request Inside Axios.prototype.request function, It's forced to set method

I figured it out. Needed to set a key in object as such: this.containerInfo.image_branch = this.imageBranch

Axios Cheat Sheet, Make a request for a user with a given ID axios.get('/user? an instance of Buffer , ArrayBuffer, // FormData or Stream // You may modify the headers object. defines whether to resolve or reject the promise for a given // HTTP response status code. axios.create({ baseURL: 'https://api.example.com' }); // Alter defaults after� This structure allows us to easily get the status and response data of a request. Now that we have our state data structure, we need to implement 3 actions. Fetching — the action to dispatch

Introducing Axios, a Popular, Promise-based HTTP Client — SitePoint, Making HTTP requests to fetch or save data is one of the most Axios returns a promise that will resolve to either a response object or an error object. the headers object as arguments and must return a modified data object Additionally the finally also cleans up a reference to an expensive object. In this example, depending on whether references belonging to a promise that is pending and not resolved but references to the promise itself have been lost are garbage collected the expensive object may be collected after all.

axios/axios: Promise based HTTP client for the browser and , Promise based HTTP client for the browser and node.js - axios/axios. Features; Browser Support; Installing; Example; Axios API; Request method aliases ArrayBuffer, // FormData or Stream // You may modify the headers object. defines whether to resolve or reject the promise for a given // HTTP response status code. If I remove axios.interceptors.request part, it works great. Should we use both request and response in same call ? if yes do you know a work around ? — You are receiving this because you were mentioned.

Update Vue object with Axios response data, Update Vue object with Axios response data. Posted 3 years ago by andremellow. Hi, need a little help :) I'm make an ajax request with Axios, and I'm getting a correct response, but There are two ways to solve this :. NOTE: this is a sibling method to the lastPromiseGet (which returns only the promise portion of this the request object). If no request has been made yet, returns undefined. axios.getReqMatching(criteria) getReqMatching() returns the same info about a specific request as lastReqGet (see above).

Comments
  • you need to pass a function to .then ... anything else is ignored (see how your second .then is not being passed a function)
  • Can you please provide an example @Bravo?
  • the first .then has a function passed as the argument, the second, doesn't
  • I have tried what you suggested but still received the same result :(
  • @swarr35 - depends on where you are inspecting this.containerInfo
  • I have tried all of the above suggestions. My this.imageBranch keeps getting deleted though once the res is sent.
  • why not just this.containerInfo = [...this.res.data, this.imageBranch];
  • I am continuing to get the same result even with the await/async syntax