Axios에서 Ajax 요청을 취소/취소하는 방법

Axios에서 Ajax 요청을 취소/취소하는 방법

사용하고 있다axiosAjax 요청의 경우reactJS+flux렌더링 UI에 사용합니다.내 앱에는 서드파티 타임라인이 있다(리액트).JS 컴포넌트).타임라인은 마우스 스크롤로 관리할 수 있습니다.앱은 스크롤 이벤트 후 실제 데이터에 대한 Ajax 요청을 보냅니다.서버에서의 요청 처리가 다음 스크롤 이벤트보다 더 느릴 수 있다는 문제.이 경우 앱은 사용자가 스크롤을 더 하기 때문에 이미 사용되지 않는 몇 가지 요청(보통 2~3개)을 가질 수 있습니다.새로운 데이터를 수신할 때마다 타임라인이 다시 그려지기 때문에 문제가 됩니다.JS + 플럭스) 이 때문에 사용자는 타임라인의 움직임을 여러 번 볼 수 있습니다.이 문제를 해결하는 가장 쉬운 방법은 다음과 같이 이전 Ajax 요청을 중단하는 것입니다.jQuery. 예:

    $(document).ready(
    var xhr;

    var fn = function(){
        if(xhr && xhr.readyState != 4){
            xhr.abort();
        }
        xhr = $.ajax({
            url: 'ajax/progress.ftl',
            success: function(data) {
                //do something
            }
        });
    };

    var interval = setInterval(fn, 500);
);

에서 요청을 취소/중지하는 방법axios?

Axios는 현재 요청 취소를 지원하지 않습니다.봐주세요자세한 것은, 이 호를 참조해 주세요.

갱신:취소 지원은 액ios v0.15에서 추가되었습니다.

EDIT: 취소 가능한 약속 제안서에 기반한 취소 토큰 API입니다.

UPDATE 2022: v0.22.0 이후 Axios는 AbortController를 지원하여 다음 방법으로 요청을 취소합니다.

예:

const controller = new AbortController();

axios.get('/foo/bar', {
   signal: controller.signal
}).then(function(response) {
   //...
});
// cancel the request
controller.abort()

useEffect 후크 사용:

useEffect(() => {
  const ourRequest = Axios.CancelToken.source() // <-- 1st step

  const fetchPost = async () => {
    try {
      const response = await Axios.get(`endpointURL`, {
        cancelToken: ourRequest.token, // <-- 2nd step
      })
      console.log(response.data)
      setPost(response.data)
      setIsLoading(false)
    } catch (err) {
      console.log('There was a problem or request was cancelled.')
    }
  }
  fetchPost()

  return () => {
    ourRequest.cancel() // <-- 3rd step
  }
}, [])

주의: POST 요청의 경우 취소에 합격합니다.세 번째 인수로서의 토큰

Axios.post(`endpointURL`, {data}, {
 cancelToken: ourRequest.token, // 2nd step
})

일반적으로 이전 Ajax 요청을 취소하고 해당 인스턴스의 새 Ajax 요청이 시작된 경우에만 다음 작업을 수행합니다.

예: API에서 코멘트를 받습니다.

// declare an ajax request's cancelToken (globally)
let ajaxRequest = null; 

function getComments() {

    // cancel  previous ajax if exists
    if (ajaxRequest ) {
        ajaxRequest.cancel(); 
    }

    // creates a new token for upcomming ajax (overwrite the previous one)
    ajaxRequest = axios.CancelToken.source();  

    return axios.get('/api/get-comments', { cancelToken: ajaxRequest.token }).then((response) => {
        console.log(response.data)
    }).catch(function(err) {
        if (axios.isCancel(err)) {
           console.log('Previous request canceled, new request is send', err.message);
        } else {
               // handle error
        }
    });
}

import React, { Component } from "react";
import axios from "axios";

const CancelToken = axios.CancelToken;

let cancel;

class Abc extends Component {
  componentDidMount() {
    this.Api();
  }

  Api() {
      // Cancel previous request
    if (cancel !== undefined) {
      cancel();
    }
    axios.post(URL, reqBody, {
        cancelToken: new CancelToken(function executor(c) {
          cancel = c;
        }),
      })
      .then((response) => {
        //responce Body
      })
      .catch((error) => {
        if (axios.isCancel(error)) {
          console.log("post Request canceled");
        }
      });
  }

  render() {
    return <h2>cancel Axios Request</h2>;
  }
}

export default Abc;

axios-cancel이라고 하는 사용 예시가 적은 매우 좋은 패키지가 있습니다.나는 그것이 매우 도움이 된다는 것을 알았다.다음은 링크입니다.https://www.npmjs.com/package/axios-cancel

https://github.com/axios/axios#cancellation

const CancelToken = axios.CancelToken;
                const source = CancelToken.source();
                let url = 'www.url.com'


                axios.get(url, {
                    progress: false,
                    cancelToken: source.token
                })
                    .then(resp => {

                        alert('done')

                    })

                setTimeout(() => {
                    source.cancel('Operation canceled by the user.');
                },'1000')

노드에서의 약속을 사용하여 이렇게 했습니다.첫 번째 요청을 한 후 폴링이 중지됩니다.

 var axios = require('axios');
    var CancelToken = axios.CancelToken;
    var cancel;
    axios.get('www.url.com',
                      {
                        cancelToken: new CancelToken(
                            function executor(c) {
                                cancel = c;
                             })
                      }
            ).then((response) =>{            
                cancel();               
              })

cp-axios 래퍼를 사용하면 다음 세 가지 유형의 취소 API를 사용하여 요청을 중단할 수 있습니다.

1. Promise cancallation API (CPromise) :

라이브 브라우저 예시

 const cpAxios= require('cp-axios');
 const url= 'https://run.mocky.io/v3/753aa609-65ae-4109-8f83-9cfe365290f0?mocky-delay=5s';
 
 const chain = cpAxios(url)
      .timeout(5000)
      .then(response=> {
          console.log(`Done: ${JSON.stringify(response.data)}`)
      }, err => {
          console.warn(`Request failed: ${err}`)
      });
 
 setTimeout(() => {
    chain.cancel();
 }, 500);

2. Abort Controller 신호 API 사용:

 const cpAxios= require('cp-axios');
 const CPromise= require('c-promise2');
 const url= 'https://run.mocky.io/v3/753aa609-65ae-4109-8f83-9cfe365290f0?mocky-delay=5s';
 
 const abortController = new CPromise.AbortController();
 const {signal} = abortController;
 
 const chain = cpAxios(url, {signal})
      .timeout(5000)
      .then(response=> {
          console.log(`Done: ${JSON.stringify(response.data)}`)
      }, err => {
          console.warn(`Request failed: ${err}`)
      });
 
 setTimeout(() => {
    abortController.abort();
 }, 500);

3. 플레인 공리를 사용하여 취소토큰:

 const cpAxios= require('cp-axios');
 const url= 'https://run.mocky.io/v3/753aa609-65ae-4109-8f83-9cfe365290f0?mocky-delay=5s';

 const source = cpAxios.CancelToken.source();
 
 cpAxios(url, {cancelToken: source.token})
      .timeout(5000)
      .then(response=> {
          console.log(`Done: ${JSON.stringify(response.data)}`)
      }, err => {
          console.warn(`Request failed: ${err}`)
      });
 
 setTimeout(() => {
    source.cancel();
 }, 500);

4. 커스텀 리액트 훅에서의 사용(라이브 데모):

import React from "react";
import { useAsyncEffect } from "use-async-effect2";
import cpAxios from "cp-axios";

/*
 Note: the related network request will be aborted as well
 Check out your network console
 */

function TestComponent({ url, timeout }) {
  const [cancel, done, result, err] = useAsyncEffect(
    function* () {
      return (yield cpAxios(url).timeout(timeout)).data;
    },
    { states: true, deps: [url] }
  );

  return (
    <div>
      {done ? (err ? err.toString() : JSON.stringify(result)) : "loading..."}
      <button onClick={cancel} disabled={done}>
        Cancel async effect (abort request)
      </button>
    </div>
  );
}

갱신하다

는 Axios v0.22.0+를 지원합니다.AbortController★★★★★★★★★★★★★★★★★★:

const controller = new AbortController();

axios.get('/foo/bar', {
   signal: controller.signal
}).then(function(response) {
   //...
});
// cancel the request
controller.abort()

v0.22.0 이후 Axios는 AbortController를 지원하여 다음 방법으로 요청을 취소합니다.

const controller = new AbortController();

axios.get('/foo/bar', {
   signal: controller.signal
}).then(function(response) {
   //...
});
// cancel the request
controller.abort()

CancelToken 권장되지 않음CancelToken을 사용하여 요청을 취소할 수도 있습니다.

악시오 취소 토큰 API는 철회된 취소 가능한 약속 제안을 기반으로 합니다.

이 API는 v0.22.0 이후 사용되지 않으므로 새 프로젝트에서 사용할 수 없습니다.

다음과 같이 CancelToken.source 팩토리를 사용하여 취소 토큰을 작성할 수 있습니다.

import {useState, useEffect} from 'react'

export function useProfileInformation({accessToken}) {
  const [profileInfo, setProfileInfo] = useState(null)

  useEffect(() => {
    const abortController = new AbortController()

    window
      .fetch('https://api.example.com/v1/me', {
        headers: {Authorization: `Bearer ${accessToken}`},
        method: 'GET',
        mode: 'cors',
        signal: abortController.signal,
      })
      .then(res => res.json())
      .then(res => setProfileInfo(res.profileInfo))

    return function cancel() {
      abortController.abort()
    }
  }, [accessToken])

  return profileInfo
}

// src/app.jsx
import React from 'react'
import {useProfileInformation} from './hooks/useProfileInformation'

export function App({accessToken}) {
  try {
    const profileInfo = useProfileInformation({accessToken})

    if (profileInfo) {
      return <h1>Hey, ${profileInfo.name}!</h1>
    } else {
      return <h1>Loading Profile Information</h1>
    }
  } catch (err) {
    return <h1>Failed to load profile. Error: {err.message}</h1>
  }
}

언급URL : https://stackoverflow.com/questions/38329209/how-to-cancel-abort-ajax-request-in-axios