이전 요청 실시간 검색 응답 취소

이전 요청 실시간 검색 응답 취소

실시간 검색 axios 요청으로 이전 요청을 취소해야 함- 요청을 하기 위해 스로틀 디바운싱을 사용하고 있지만 기존 단어가 지워지고 새 값이 업데이트되는 경우 문제가 있음 - 일부 경우 이전 단어에 대한 결과가 표시되고 있으므로 동일한 요청에 대한 이전 요청을 모두 취소해야 할 것임ID, 기사들을 읽어보지만, 그 중 아무도 내 활용 사례에 해당되지 않는다.어떤 도움도 내 코드야

환원기:

switch (action.type) {
case GETTING_DATA:
  return {
    ...state,
    results: action.payload,
  };
case SEARCH_DATA:
  return {
    ...state,
    Results: action.payload,
  };



export function getSearch(value) {
  return (dispatch) => {
    dispatch({
      type: GETTING_DATA,
    });
    const arg = {
      search: value,
    };
    apiGet('abc', arg).then(response => 
     getResults(dispatch, response));
  };
}
const getResults = (dispatch, response) => {
  dispatch({
    type: SEARCH_DATA,
    payload: response.data,
  });
};

서비스:

export const apiGet = async (path = '', args = {}) => {
  const endpoint = "/aaa/aaa/aaa";
  try {
    return axios.get(endpoint, getConfig());
  } catch (e) {
  }
};

다음을 시도해 보십시오.

통과하다value에 대한 짐으로.GETTING_DATA액션이것은 주에서 가장 최근에 요청된 값을 저장할 것이다.

그럼, 안으로.getResults같은 값을 반응 데이터와 함께 환원기에 보낸다.환원기 내부, 전달된 값인지 점검하십시오.getResults을 통해 주(州)에 저장된 것과 동일함GETTING_DATA.

그렇다면 이 데이터는 최신 요청에 따라 제공되므로 주(州)에 저장하십시오.그렇지 않으면 그냥 무시해도 된다.

즉, 다음과 같다.

액션:

switch (action.type) {
case GETTING_DATA:
  return {
    ...state,
    lastRequestTime: action.payload,
  };
case SEARCH_DATA:
  if (action.payload.lastRequestTime === state.lastRequestTime) {
    return {
      ...state,
      Results: action.payload.response,
    };
  } else {
    return state
  }

액션:

export function getSearch(value) {
  return (dispatch) => {
    const lastRequestTime = Date.now()
    dispatch({
      type: GETTING_DATA, 
      payload: lastRequestTime
    });
    const arg = {
      search: value,
    };
    apiGet('abc', arg).then(response => 
     getResults(dispatch, { response, lastRequestTime }));
  };
}
const getResults = (dispatch, response) => {
  dispatch({
    type: SEARCH_DATA,
    payload: response.data,
  });
};

이렇게 작은 도우미 래퍼를 만들어 이전 요청을 취소해야 하는 곳이라면 어디서든 사용할 수 있다.

// ../services.js

function createApi(baseURL) {
  const axiosInst = axios.create({
    baseURL,
  });
  // here you can set default headers:
  axiosInst.defaults.headers.common['Content-Type'] = 'application/json';
  // return the function with closure variable to use for canceling
  return (type = 'get') => {
    let call = null;
    return (url, data, config) => {
      if (call) {
        call.cancel('Only one request allowed!');
      }
      call = axios.CancelToken.source();
      const extConf = {
        cancelToken: call.token,
        ...config,
      };
      switch (type) {
        case 'request':
          return api[type](extConf);

        case 'get':
        case 'delete':
        case 'head':
          return api[type](url, extConf);

        default:
          return api[type](url, data, extConf);
      }
    };
  };
}

export const baseApi = createApi('http://localhost:5000/api/')

그런 다음 이렇게 아무데나 사용하십시오.

import baseApi from '../servises.js';

const fetchItemsService = baseApi('post');

//...
componentDidMount() {
  fetchItemsService('/items').then(() => {});
}
//...

참조URL: https://stackoverflow.com/questions/48122554/cancel-previous-request-live-search-reactjs