Как и когда использовать Fetch API и Axios в ваших проектах VueJS.

До выпуска Fetch API Axios был популярным HTTP-клиентом для HTTP-запросов. Однако теперь, когда Fetch API встроен в большинство современных браузеров, мы можем использовать его, чтобы значительно упростить HTTP-запросы, что в некоторых случаях делает Axios своего рода избыточным.

В этой статье мы рассмотрим эти два способа, посмотрим, как их использовать, и попытаемся вынести вердикт относительно того, когда и почему следует использовать каждый из них.

В качестве примечания следует упомянуть, что использование библиотек, таких как Axios, не единственный способ, по сути, ускорить разработку. Другой способ - создать компоненты в виде независимых блоков Lego, которые вы сможете повторно использовать в других проектах.

Чтобы сделать это как можно проще, вы можете использовать концентраторы облачных компонентов, такие как Bit.dev. Это даст вам свободу публиковать компоненты Vue из любой кодовой базы, над которой вы работаете, и делиться своими компонентами, задокументированными в облаке, с вашей командой и будущими людьми.

Получить API

Fetch API - это стандартный API для выполнения HTTP-запросов в браузере.

Это отличная альтернатива старому XMLHttpRequestconstructor для выполнения запросов.

Он поддерживает все виды запросов, включая GET, POST, PUT, PATCH, DELETE и OPTIONS, что и нужно большинству людей.

Чтобы сделать запрос с помощью Fetch API, нам не нужно ничего делать. Все, что нам нужно сделать, это сделать запрос напрямую с fetchobject.

Например, мы можем написать:

App.vue

<template>
  <div id="app">
    {{data}}
  </div>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
      data: {}
    }
  },
  beforeMount(){
    this.getName();
  },
  methods: {
    async getName(){
      const res = await fetch('https://api.agify.io/?name=michael');
      const data = await res.json();
      this.data = data;
    }
  }
};
</script>

В приведенном выше коде мы сделали простой запрос GET из API, а затем преобразовали данные из JSON в объект JavaScript с помощью метода json().

Затем мы отображаем данные объекта прямо в шаблоне.

Мы также можем обрабатывать тела ответов в других форматах с помощью Fetch API, включая простой текст и двоичные данные.

Как и большинство HTTP-клиентов, мы можем отправлять заголовки и тела запросов с помощью Fetch API.

Чтобы отправить запрос с заголовками HTTP, мы можем написать:

App.vue

<template>
  <div id="app">
    <img :src="data.src.tiny">
  </div>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
      data: {
        src: {}
      }
    };
  },
  beforeMount() {
    this.getPhoto();
  },
  methods: {
    async getPhoto() {
      const headers = new Headers();
      headers.append(
        "Authorization",
        "api_key"
      );
      const request = new Request(
        "https://api.pexels.com/v1/curated?per_page=11&page=1",
        {
          method: "GET",
          headers,
          mode: "cors",
          cache: "default"
        }
      );
      const res = await fetch(request);
      const { photos } = await res.json();
      this.data = photos[0];
    }
  }
};
</script>

В приведенном выше коде мы использовали конструктор Headers, который используется для добавления заголовков запросов к запросам Fetch API.

Метод append добавляет к запросу наш заголовок 'Authorization'.

Мы должны установить mode на 'cors' для междоменного запроса, а headers установить на headers объект, возвращаемый Headersconstructor`.

Затем фотография отображается в шаблоне.

Чтобы составить тело запроса, мы можем написать следующее:

<template>
  <div id="app">
    <form @submit.prevent="createPost">
      <input placeholder="name" v-model="post.name">
      <input placeholder="title" v-model="post.title">
      <br>
      <button type="submit">Create</button>
    </form>
    {{data}}
  </div>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
      post: {},
      data: {}
    };
  },
  methods: {
    async createPost() {
      const request = new Request(
        "https://jsonplaceholder.typicode.com/posts",
        {
          method: "POST",
          mode: "cors",
          cache: "default",
          body: JSON.stringify(this.post)
        }
      );
      const res = await fetch(request);
      const data = await res.json();
      this.data = data;
    }
  }
};
</script>

В приведенном выше коде мы сделали запрос, преобразовав объект this.post в строку, а затем отправив его с запросом POST.

Затем мы получаем ответ так же, как и раньше, и отображаем его.

Как мы видим, делать запросы с помощью Fetch API не так уж сложно, и он встроен в большинство браузеров.

Axios

Axios - популярный HTTP-клиент, который работает как в браузере, так и в приложениях Node.js.

Мы можем установить его, запустив:

npm i axios

Затем мы можем использовать его для выполнения запросов в виде простого запроса GET следующим образом:

App.vue

<template>
  <div id="app">{{data}}</div>
</template>
<script>
const axios = require("axios");
export default {
  name: "App",
  data() {
    return {
      data: {}
    };
  },
  beforeMount(){
    this.getName();
  },
  methods: {
    async getName(){
      const { data } = await axios.get("https://api.agify.io/?name=michael");
      this.data = data;
    }
  }
};
</script>

В приведенном выше коде мы вызываем метод axios.get с URL-адресом для выполнения запроса.

Затем мы присваиваем объекту данные ответа.

Если мы хотим сделать запрос с заголовками, мы можем написать:

App.vue

<template>
  <div id="app">
    <img :src="data.src.tiny">
  </div>
</template>
<script>
const axios = require("axios");
export default {
  name: "App",
  data() {
    return {
      data: {}
    };
  },
  beforeMount() {
    this.getPhoto();
  },
  methods: {
    async getPhoto() {
      const {
        data: { photos }
      } = await axios({
        url: "https://api.pexels.com/v1/curated?per_page=11&page=1",
        headers: {
          Authorization: "api_key"
        }
      });
      this.data = photos[0];
    }
  }
};
</script>

В приведенном выше коде мы сделали запрос GET с нашим ключом API Pexels с методом axios, который можно использовать для выполнения любого запроса.

Если команда запроса не указана, это будет запрос GET.

Как мы видим, код немного короче, поскольку нам не нужно создавать объект с помощью конструктора Headers.

Если мы хотим установить один и тот же заголовок в нескольких запросах, мы можем использовать перехватчик запросов, чтобы установить заголовок или другую конфигурацию для всех запросов.

Например, мы можем переписать приведенный выше пример следующим образом:

main.js:

import Vue from "vue";
import App from "./App.vue";
const axios = require("axios");
axios.interceptors.request.use(
  config => {
    return {
      ...config,
      headers: {
        Authorization: "api_key"
      }
    };
  },
  error => Promise.reject(error)
);
Vue.config.productionTip = false;
new Vue({
  render: h => h(App)
}).$mount("#app");

App.vue

<template>
  <div id="app">
    <img :src="data.src.tiny">
  </div>
</template>
<script>
const axios = require("axios");
export default {
  name: "App",
  data() {
    return {
      data: {}
    };
  },
  beforeMount() {
    this.getPhoto();
  },
  methods: {
    async getPhoto() {
      const {
        data: { photos }
      } = await axios({
        url: "https://api.pexels.com/v1/curated?per_page=11&page=1"
      });
      this.data = photos[0];
    }
  }
};
</script>

Мы переместили заголовок в main.js внутри кода нашего перехватчика.

Первый аргумент, переданный в axios.interceptors.request.use, - это функция для изменения конфигурации запроса для всех запросов.

А второй аргумент - это обработчик ошибок для обработки ошибок всех запросов.

Точно так же мы можем настроить перехватчики для ответов.

Чтобы сделать запрос POST с телом запроса, мы можем использовать метод axios.post.

App.vue

<template>
  <div id="app">
    <form @submit.prevent="createPost">
      <input placeholder="name" v-model="post.name">
      <input placeholder="title" v-model="post.title">
      <br>
      <button type="submit">Create</button>
    </form>
    {{data}}
  </div>
</template>
<script>
const axios = require("axios");
export default {
  name: "App",
  data() {
    return {
      post: {},
      data: {}
    };
  },
  methods: {
    async createPost() {
      const { data } = await axios.post(
        "https://jsonplaceholder.typicode.com/posts",
        this.post
      );
      this.data = data;
    }
  }
};
</script>

Мы делаем запрос POST с помощью метода axios.post с телом запроса во втором аргументе.

Затем мы возвращаем данные ответа, получая свойство data из полученного ответа.

Вердикт

Fetch API и Axios во многом схожи. Они оба легко интегрируются в приложения VueJS, и оба, по сути, выполняют свою работу.

Если вы работаете с несколькими запросами, вы обнаружите, что Fetch требует, чтобы вы написали больше кода, чем Axios, даже с учетом необходимых для этого настроек. Поэтому для простых запросов Fetch API и Axios совершенно одинаковы. Однако для более сложных запросов лучше использовать Axios, поскольку он позволяет настраивать несколько запросов в одном месте.

Учить больше



11 лучших инструментов разработчика VueJS на 2020 год
Инструменты разработчика Vue, которые вы должны добавить в свой набор инструментов. blog.bitsrc.io





Как легко обмениваться компонентами Vue между приложениями
Узнайте, как легко обмениваться компонентами Vue между разными проектами, синхронизировать изменения и быстрее создавать с помощью Bit. blog.bitsrc .io





10 лучших шаблонов VueJS на 2020 год
Различные шаблоны VueJS для разных ситуаций. blog.bitsrc.io