Axios はリクエストをキャンセルし、重複リクエストを回避します

// axiosインスタンスを作成する
constサービス = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // url = ベース URL + リクエスト URL
  withCredentials: true, // クロスドメインリクエスト時にCookieを送信する
  timeout: 500000, // リクエストタイムアウト
  変換リクエスト: [関数(データ) {
    // データに対して任意の変換を実行します return Qs.stringify({
      ...データ
    },
    // 配列変換 { arrayFormat: 'brackets' })
  }]
})

// リクエストインターセプター
サービスインターセプターリクエストの使用(
  設定 => {
    // リクエストが送信される前に何かを行う

    （store.getters.token）の場合{
      // 各リクエストにトークンを持たせる
      // ['X-Token']はカスタムヘッダーキーです
      // 実際の状況に応じて変更してください
      config.headers['token'] = getToken()
    }
    設定を返す
  },
  エラー => {
    // リクエストエラーに対して何かを行う
    console.log(error) // デバッグ用
    Promise.reject(error) を返します。
  }
）

エクスポート関数remoteApi(data) {
  リクエストを返す({
    URL: '/api',
    メソッド: 'post'、
    データ
  })
}

CancelToken は axios.CancelToken に置き換えられます。
const ソース = CancelToken.source();

axios.get('/user/12345', {
  キャンセルトークン: ソース.token
}).catch(関数(スロー) {
  もし（axios.isCancel（スロー））{
    console.log('リクエストがキャンセルされました', throwed.message);
  } それ以外 {
     // エラーを処理する }
});

axios.post('/user/12345', {
  名前: '新しい名前'
}, {
  キャンセルトークン: ソース.token
})

// リクエストをキャンセルします（メッセージパラメータはオプションです）
source.cancel('ユーザーによって操作がキャンセルされました。');

エクスポート関数 remoteApi(data, cancelToken) {
  リクエストを返す({
    URL: '/api',
    メソッド: 'post'、
    キャンセルトークン、
    データ
  })
}

// コンポーネントメソッドで this.cancelToken = CancelToken.source()
remoreApi(データ、this.cancelToken)、then(....)、catch(....)、finally(....)

// コンポーネントメソッドで this.cancelToken.cancel('ダウンロードをキャンセル')