Сила Axios

Узнайте о возможностях Axios и о том, как их использовать на практике.

Axios - это мощный HTTP-клиент, основанный на обещаниях, используемый для запросов к внешним серверам из браузера. Если вы фронтенд-разработчик, возможно, вы уже используете эту технологию.

Однако Axios предоставляет ряд расширенных функций, о которых многие не знают. Поэтому в этой статье мы сосредоточимся на этих функциях, чтобы лучше понять его истинный потенциал.

• Перехват запросов и ответов
• Делайте одновременные запросы
• Защита от XSRF
• Преобразование данных
• Поддержка процесса загрузки
• Тайм-аут ответа
• Возможность отмены запросов

Перехват запросов и ответов

Об этой особенности Axios широко говорят. Поэтому я не буду давать подробных объяснений. Вкратце, перехватчики позволяют централизованно проверять HTTP-запросы в браузере.

Перехватчик запросов будет выглядеть следующим образом.

// declare a request interceptor
axios.interceptors.request.use(config => {
  // perform a task before the request is sent
  console.log('Request was sent');

  return config;
}, error => {
  return Promise.reject(error);
});

// GET request
axios.get('https://mysite.com/user')
  .then(response => {
    console.log('This is printed after ');
  });

Каждый раз при отправке запроса на консоли будет распечатан журнал «Запрос отправлен». Это место, где вы можете выполнить любую операцию до того, как какие-либо HTTP-запросы будут отправлены на сервер. Подобно этому, есть и перехватчики ответа.

Выполнение одновременных запросов

Если вам нужно сделать несколько сетевых запросов одновременно, вместо того, чтобы делать их последовательно, Axios предоставляет метод под названием Axios.all().

Давайте посмотрим на пример.

class Customer extends Component {
    constructor(props) {
       super(props);
       this.state = {
          activeCustomer: {
             data: '',
             permissions: '',
          }
       }
    }
    getCustomerData = () => axios.get(`${URL}/profile/${this.props.activeCustomerId}`);

    getPermissions = () => axios.get(`${URL}/permissions/${this.props.activeCustomerId}`);

    async componentDidMount() {
        try {
            const [customerData, customerPermissions] = await axios.all([ this.getCustomerData(), this.getPermissions() ]);
            this.setState(
                activeCustomer: {
                    data: customerData.data,
                    permissions: customerPermissions.data
                }
            );
        }
        catch (error) {
            console.log(error);
        }
    }
}

Это позволяет выполнять действия после завершения всех одновременных HTTP-запросов.

Совет: используйте независимые компоненты для увеличения скорости и масштабирования.

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

Инструменты OSS, такие как Bit, предлагают отличные возможности разработчика для создания независимых компонентов и составления приложений. Многие команды начинают с создания своих дизайн-систем или микро-интерфейсов с помощью независимых компонентов.
Попробуйте →

Защита от XSRF

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

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

Это можно добавить в Axios следующим образом.

const options = {
  method: 'post',
  url: '/signup',
  xsrfCookieName: 'XSRF-TOKEN',
  xsrfHeaderName: 'X-XSRF-TOKEN',
};

// send the request
axios(options);

Преобразование данных

Перед отправкой запроса или при получении ответа Axios предоставляет механизм для управления данными. Это делается с помощью двух вариантов конфигурации;

• transformRequest
• transformResponse

Любые функции, переданные в transformRequest, применяются к запросам PUT, POST и PATCH. transformResponse применяется к данным ответа перед передачей в обратный вызов then().

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

const options = {
  transformRequest: [
    (data, headers) => {
      // do something with data
      return data;
    }
  ]
}

Поддержка процесса загрузки

Axios позволяет при необходимости отслеживать ход выполнения POST-запроса. Это может быть полезно при загрузке больших файлов на сервер. Для этого вы можете передать конфигурацию запроса в Axios.

Конфигурация запроса будет выглядеть следующим образом.

const config = {
    onUploadProgress: progressEvent => {
       console.log(progressEvent.loaded);
    }
}

Этот объект конфигурации необходимо передать Axios. Функция onUploadProgress будет вызываться всякий раз, когда изменяется ход загрузки.

axios.put(`${URL}/upload/image.png`, data, config)

Вы даже можете отслеживать это в пользовательском интерфейсе, реализовав индикатор выполнения с помощью this.

Тайм-аут ответа

Если для HTTP-запроса не установлен тайм-аут, любой удаленный конец может удерживать запрос в ожидании более длительного периода. При ограниченных ресурсах это было бы пустой тратой. В Axios тайм-аут по умолчанию установлен на 0. Однако Axios позволяет вам установить индивидуальный тайм-аут, когда это необходимо.

Один из способов добавить тайм-аут - передать его объекту конфигурации.

axios
  .post('http://mysite.com/user', { name: 'John' }, { timeout: 2 })
  .then(response => {
     console.log(response);
  })
  .catch(error => {
     console.log(error);
  });

В приведенном выше запросе установлен тайм-аут 2 мс.

Возможность отмены запросов

Могут быть сценарии, когда вам нужно отменить уже отправленный запрос. Axios позволяет сделать это с помощью токена отмены. CancelToken.source factory предоставляет два основных требования для отмены запроса; токен отмены и функция cancel(). Токен отмены можно передать как конфигурацию функции axios.get() и вызвать метод cancel() всякий раз, когда вам нужно отменить предыдущий запрос Axios.

const CancelToken = axios.CancelToken;
// create the source
this.source = CancelToken.source();
try {
    const { data } = await axios.get(`${URL}/posts`, {
       cancelToken: this.source.token
    });
    this.setState({
       posts: data
    })
} catch (err) {
    // check if the request was cancelled
    if(axios.isCancel(err)) {
       console.log(err.message);
    }
    console.log(err.message)
}

На практике эта функция используется, когда пользователь вводит ключевое слово для поиска, чтобы получить отфильтрованный ответ.

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

Один из способов добавить тайм-аут - передать его объекту конфигурации.

Резюме

Как мы выяснили в этой статье, Axios имеет множество расширенных функций, которые могут быть полезны для наших приложений. Большинство этих функций недоступны в других подобных API, например fetch.

Кроме того, Axios можно использовать как в браузере, так и в Node.js. Это будет разделять код JavaScript между браузером и серверной частью или выполнять рендеринг ваших интерфейсных приложений на стороне сервера.

Спасибо за прочтение!

Учить больше