在 Vue.js 中连续调用两个 API

Question

I have an app in Vue.js where user can post a review on a selected restaurant. To "POST" a review I have two functions linked to on @click event:

  <button          
  class="btn btn-sm btn-primary mt-2 mr-2"
  @click="addRestaurant(), addReview()"
  >Add a Review</button>

Here is my two functions:

addRestaurant () {
  let endpoint = `/api/restaurant/`;
  let method = "POST";    
  apiService(endpoint, method, { maps: this.$route.params.maps, adress: this.$route.params.adress, name: this.$route.params.name })    
    },
addReview () {
  let endpoint = `/api/restaurant_review/`;
  let method = "POST";
  apiService(endpoint, method, { maps: this.$route.params.maps, review_author: 1 })
    },

It does work most of the time but I am facing two problems:

-If a restaurant instance allready exists, it throws a HTTP 400 error in my console. I've tried to catch it but with no success.

-It seems that sometimes addReview() is execued before addRestaurant() and I get an error because this.$route.params.maps has a ForeignKey constraint.

So I tried to make only one function, with my two functions inside, trying to make addReview() executing as soon as addRestaurant() is done but I couldn't find a way. I also tried to make an if statement to check if my restaurant instance existed but I don't know if making so much API call in a row is good practice.

Any help is welcome I you think about the right solution to handle my problem

This my API service:

function handleResponse(response) {
  if (response.status === 204) {
    return '';
  } else if (response.status === 404) {
    return null;
  } else if (response.status === 400) {
    console.log("Restaurant allready added!")
    return null;
  } else {
    return response.json();    
  }
}


function apiService(endpoint, method, data) {
  const config = {
    method: method || "GET",
    body: data !== undefined ? JSON.stringify(data) : null,
    headers: {
      'content-type': 'application/json',
      'X-CSRFTOKEN': CSRF_TOKEN
    }
  };
  return fetch(endpoint, config)
          .then(handleResponse)
          .catch(error => console.log(error))
}

export { apiService };

Answer 1

First of all, in your handleResponse you can throw an error if something is wrong. That way, the error will end up in the catch method of the fetch call:

function handleResponse(response) {
  if (response.status === 204) {
    throw new Error("No data")
  } else if (response.status === 404) {
    throw new Error("Wrong URL")
  } else if (response.status === 400) {
    throw new Error("Restaurant already added!")
  } else {
    return response.json();    
  }
}

If handleresponse goes well, the fetch call will return a promise, but you're not handling that promise when you call apiService . I think it should look something like this:

addRestaurant () {
   let endpoint = `/api/restaurant/`;
   let method = "POST";    
   let config =  { maps: this.$route.params.maps, adress: this.$route.params.adress, name: this.$route.params.name };

   apiService(endpoint, method, config)
   .then(data => {
       console.log("restaurant added!" + data);
       // now you can call the add review function
       addReview();
   })
   .catch(error => console.log(error));
},