vuejs http request code example

Example 1: http requests in vue 3

# http requests using Fetcht api in Vue 3 explained (see videos below) 
# https://www.youtube.com/watch?v=-Aoyja_BjZY
# https://www.youtube.com/watch?v=LvOYCjpMQ10

Example 2: how to use api url in vue

<a :href="post.url" target="_blank"><img :src="post.image_url"></a>

Example 3: Vue HTTP

function fetchData() {
  loading.value = true;
  // I prefer to use fetch
  // you can use use axios as an alternative
  return fetch('http://jsonplaceholder.typicode.com/posts', {
    method: 'get',
    headers: {
      'content-type': 'application/json'
    }
  })
    .then(res => {
      // a non-200 response code
      if (!res.ok) {
        // create error instance with HTTP status text
        const error = new Error(res.statusText);
        error.json = res.json();
        throw error;
      }

      return res.json();
    })
    .then(json => {
      // set the response data
      data.value = json.data;
    })
    .catch(err => {
      error.value = err;
      // In case a custom JSON error response was provided
      if (err.json) {
        return err.json.then(json => {
          // set the JSON response message
          error.value.message = json.message;
        });
      }
    })
    .then(() => {
      loading.value = false;
    });
}