Функция поиска в реальном времени работает, но не отменяет предыдущий запрос на вкладке сети - PullRequest
Новая
       31

Функция поиска в реальном времени работает, но не отменяет предыдущий запрос на вкладке сети

0 голосов
/ 19 октября 2019

Я следую учебному пособию на "alligator.io". Ссылка: https://alligator.io/react/live-search-with-axios/

Код :: App.js 

import React, { Component } from 'react';
import { avoidUnnecessarySearch } from './utils';
import './App.css';

class App extends Component {
  state = {
    movies: null,
    loading: false,
    value: ''
  };

  search = async val => {
    this.setState({ loading: true });
    const res = await avoidUnnecessarySearch(
      `https://api.themoviedb.org/3/search/movie?query=${val}&api_key=aac2c5b048fc2fae15675475f98c6ef7`
    );
    const movies = await res ? res.results:'';
    console.log(movies);

    // this.setState({ movies, loading: false });
  };

  onChangeHandler = async e => {
    this.search(e.target.value);
    this.setState({ value: e.target.value });
  };


  render() {
    return (
      <div>
          <input
            value={this.state.value}
            onChange={e => this.onChangeHandler(e)}
            placeholder="Type something to search"
            />

      </div>
    )
  }
}
export default App;

Utils.js 

import axios from 'axios';

const makeRequestCreator = () => {
  let token;
  return async (query) => {
   // Check if we made a request
   if(token){
     // Cancel the previous request before making a new request
     token.cancel()
   }
   // Create a new CancelToken
   token = axios.CancelToken.source()
   try{
     const res = await axios(query, {cancelToken: token.token})
     const result = res.data
     return result;
   } catch(error) {
       if(axios.isCancel(error)) {
         // Handle if request was cancelled
         console.log('Request canceled', error.message);
       } else {
         // Handle usual errors
         console.log('Something went wrong: ', error.message)
       }
   }
 }
}

export const avoidUnnecessarySearch = makeRequestCreator();

Проблема :: Проблема в том, что, хотя всеработает, но код, который записан в файле utils.js для отмены всех предыдущих запросов перед выполнением нового запроса, не работает должным образом, и я получаю сетевой запрос для каждого нажатия клавиши или алфавита, которые я печатаю в поле поиска.

Мое намерение состоит в том, чтобы, если я набираю слово «человек-паук», мне нужно было бы искать только человека-паука, а не «s», «p», «i», «d», «e», «r» или «m». или «а», и запрос об этом должен быть немедленно отменен, чтобы избежать нагрузки на сетьЛюбое понимание будет полезно здесь.

1 Ответ

0 голосов
/ 19 октября 2019

Я скопировал точно такой же код и запустил в песочнице кода. Работает. Codesandbox: https://codesandbox.io/s/inspiring-mountain-zgqqtКак вы можете видеть, когда я набрал spiderman, все остальные запросы были отменены, и только слово spiderman оказалось успешным. Запрос API . Lmk, если у вас возникнут какие-либо проблемы.

...