vue.js와 함께 axios를 사용하여 이전 요청을 취소합니다.

vue.js와 함께 axios를 사용하여 이전 요청을 취소합니다.

사용하고 있다axios그리고.vue.js.구글을 하고 있고, Axios 문서를 확인했지만, 아직 방법을 알 수 없습니다.

2020 업데이트: Axios 요청을 취소하는 방법

을 생성하다cancelToken저장하다

import axios from 'axios'
const request = axios.CancelToken.source();

을 통과하다cancelToken신봉자의 요구에 따라

axios.get('API_URL', { cancelToken: request.token })

저장한 요청에 액세스하여.cancel()취소 방법

request.cancel("Optional message");

코드 앤 박스에 있는 작은 앱에서 라이브로 보기

---

---

Axios 취소를 살펴봅니다.

---

---

라이브로 보실 수 있는 간단한 예시입니다.

HTML:

<button @click="send">Send</button>
<button :disabled="!request" @click="cancel">Cancel</button>

JS

import axios from "axios";

export default {
  data: () => ({
    requests: [],
    request: null
  }),

  methods: {
    send() {
      if (this.request) this.cancel();
      this.makeRequest();
    },

    cancel() {
      this.request.cancel();
      this.clearOldRequest("Cancelled");
    },

    makeRequest() {
      const axiosSource = axios.CancelToken.source();
      this.request = { cancel: axiosSource.cancel, msg: "Loading..." };
      axios
        .get(API_URL, { cancelToken: axiosSource.token })
        .then(() => {
          this.clearOldRequest("Success");
        })
        .catch(this.logResponseErrors);
    },

    logResponseErrors(err) {
      if (axios.isCancel(err)) {
        console.log("Request cancelled");
      }
    },

    clearOldRequest(msg) {
      this.request.msg = msg;
      this.requests.push(this.request);
      this.request = null;
    }
  }
};

이 예에서는 새 요청이 시작될 때 현재 요청이 취소됩니다.오래된 요구가 취소되기 전에 새로운 요구가 발행되면 서버는 5초 후에 응답합니다.그cancelSource는 요청을 취소하기 위해 사용할 수 있는 취소 토큰을 지정합니다.상세한 것에 대하여는, Axios 의 메뉴얼을 참조해 주세요.

new Vue({
  el: "#app",
  data: {
      searchItems: null,
      searchText: "some value",
      cancelSource: null,
      infoText: null
  },
  methods: {
    search() {
      if (this.searchText.length < 3)
      {
        return;
      }

      this.searchItems = null;
      this.infoText = 'please wait 5 seconds to load data';

      this.cancelSearch();
      this.cancelSource = axios.CancelToken.source();

      axios.get('https://httpbin.org/delay/5?search=' + this.searchText, {
        cancelToken: this.cancelSource.token }).then((response) => {
          if (response) {
            this.searchItems = response.data;
            this.infoText = null;
            this.cancelSource = null;
          }
        });
    },
    cancelSearch () {
      if (this.cancelSource) {
        this.cancelSource.cancel('Start new search, stop active search');
        console.log('cancel request done');
      }
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <input v-model="searchText" type="text" />
  <button @click="search">Search</button>{{infoText}}
  <pre>
  {{searchItems}}
  </pre>
</div>

먼저 몇 가지 변수를 정의합니다.

data: function () {
    return {
        request_source : ''
    }
},

그 후 방법 내부

source = CancelToken.source();
if(this.request_source != '')
    this.request_source.cancel('Operation canceled by the user.');

this.request_source = source;

axios
   .get(
       URL,
          {
              params:{key1: value1},
              cancelToken: this.request_source.token
          }
    )

언급URL : https://stackoverflow.com/questions/50516438/cancel-previous-request-using-axios-with-vue-js