Axios の cancelToken と AbortController を使いこなす

2024-05-23

React、Flux、React-Flux における Axios での Ajax リクエストのキャンセル・中止方法

React、Flux、React-Flux において、非同期処理を扱う上で重要な役割を果たすのが Ajax リクエストです。しかし、状況によってはリクエストをキャンセルしたり中止したりする必要が生じます。Axios は、非同期 HTTP リクエストを扱う人気のある JavaScript ライブラリですが、キャンセル機能はデフォルトでは提供されていません。

そこで、本記事では、Axios で Ajax リクエストをキャンセル・中止する方法について、React、Flux、React-Flux の文脈を踏まえながら、分かりやすく解説します。

方法

Axios で Ajax リクエストをキャンセル・中止するには、主に以下の 2 つの方法があります。

cancelToken は、Axios v0.15.0 で導入された機能で、リクエストのキャンセルを可能にするトークンオブジェクトを提供します。具体的な手順は以下の通りです。

リクエスト設定に cancelToken を含める:

const axios = require('axios');

const source = axios.CancelToken.source();

const config = {
  url: 'https://example.com/api/data',
  method: 'get',
  cancelToken: source.token
};

リクエストを実行:

axios(config)
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    if (axios.isCancel(error)) {
      console.log('Request canceled');
    } else {
      console.error(error);
    }
  });

リクエストをキャンセル:

source.cancel('Request canceled due to...');

AbortController は、Web ブラウザの標準 API であり、HTTP リクエストを含む様々な操作を中止するために使用できます。Axios v0.19.0 以降では、AbortController を利用したキャンセル機能がサポートされています。具体的な手順は以下の通りです。

AbortController インスタンスを作成:

const controller = new AbortController();
const signal = controller.signal;

const axios = require('axios');

const config = {
  url: 'https://example.com/api/data',
  method: 'get',
  signal
};

axios(config)
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    if (error.name === 'AbortError') {
      console.log('Request canceled');
    } else {
      console.error(error);
    }
  });

controller.abort();

補足

上記のいずれの方法を選択する場合も、catch ブロック内で axios.isCancel(error) または error.name === 'AbortError' を用いて、キャンセル操作によるエラーかどうかを判別する必要があります。
Flux や React-Flux アーキテクチャにおいては、Store 内で非同期処理を行う際に、これらのキャンセル機能を活用することで、データフェッチの制御を効率的に行うことができます。

Axios で Ajax リクエストをキャンセル・中止するには、cancelToken または AbortController を利用する方法があります。これらの機能を活用することで、非同期処理をより柔軟かつ適切に制御することができます。

React、Flux、React-Flux における Axios での Ajax リクエストのキャンセル・中止方法：サンプルコード

cancelToken を使用したサンプル

import React, { Component } from 'react';
import axios from 'axios';
import { Store } from './store';

class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.state = { data: null };
  }

  componentDidMount() {
    const source = axios.CancelToken.source();
    const config = {
      url: 'https://example.com/api/data',
      method: 'get',
      cancelToken: source.token
    };

    Store.dispatch({ type: 'FETCH_DATA' });

    axios(config)
      .then(response => {
        this.setState({ data: response.data });
        Store.dispatch({ type: 'FETCH_DATA_SUCCESS', data: response.data });
      })
      .catch(error => {
        if (axios.isCancel(error)) {
          console.log('Request canceled');
          Store.dispatch({ type: 'FETCH_DATA_FAIL', error });
        } else {
          console.error(error);
          Store.dispatch({ type: 'FETCH_DATA_FAIL', error });
        }
      });

    // 5秒後にリクエストをキャンセル
    setTimeout(() => source.cancel('Request canceled due to timeout'), 5000);
  }

  render() {
    const { data } = this.state;
    return (
      <div>
        {data ? 
          <div>
            <p>Fetched data: {data}</p>
          </div>
        :
          <div>
            <p>Loading...</p>
          </div>
        }
      </div>
    );
  }
}

export default MyComponent;

import React, { Component } from 'react';
import axios from 'axios';
import { Store } from './store';

class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.state = { data: null };
  }

  componentDidMount() {
    const controller = new AbortController();
    const signal = controller.signal;
    const config = {
      url: 'https://example.com/api/data',
      method: 'get',
      signal
    };

    Store.dispatch({ type: 'FETCH_DATA' });

    axios(config)
      .then(response => {
        this.setState({ data: response.data });
        Store.dispatch({ type: 'FETCH_DATA_SUCCESS', data: response.data });
      })
      .catch(error => {
        if (error.name === 'AbortError') {
          console.log('Request canceled');
          Store.dispatch({ type: 'FETCH_DATA_FAIL', error });
        } else {
          console.error(error);
          Store.dispatch({ type: 'FETCH_DATA_FAIL', error });
        }
      });

    // 5秒後にリクエストをキャンセル
    setTimeout(() => controller.abort(), 5000);
  }

  render() {
    const { data } = this.state;
    return (
      <div>
        {data ? 
          <div>
            <p>Fetched data: {data}</p>
          </div>
        :
          <div>
            <p>Loading...</p>
          </div>
        }
      </div>
    );
  }
}

export default MyComponent;

上記のサンプルコードは、あくまでも基本的な例です。実際のアプリケーションでは、状況に応じて適切な方法を選択し、必要に応じてエラー処理やロジックを追加する必要があります。
Flux や React-Flux アーキテクチャを実装する場合は、Store 内で cancelToken または AbortController を適切に管理し、非同期処理のキャンセル機能を活用することが重要です。

Axios で Ajax リクエストをキャンセル・中止する方法：その他の方法

XMLHttpRequest を使用する

Axios は、内部的に XMLHttpRequest を使用して HTTP リクエストを実行します。そのため、XMLHttpRequest の持つ abort() メソッドを用いてリクエストをキャンセルすることも可能です。

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://example.com/api/data');
xhr.onload = function() {
  if (xhr.status === 200) {
    console.log(xhr.responseText);
  } else {
    console.error('Error:', xhr.statusText);
  }
};

// 5秒後にリクエストをキャンセル
setTimeout(() => xhr.abort(), 5000);

xhr.send();